vuex를 사용하여 uniapp에서 로그인 기능을 구현하는 방법

Vue.js는 오늘날 프런트 엔드 개발에서 가장 인기 있는 JavaScript 프레임워크 중 하나입니다. 그리고 uni-app은 Vue.js를 사용하여 크로스 플랫폼 애플리케이션을 개발하기 위한 프레임워크입니다. Vuex는 Vue.js의 상태 관리 라이브러리이며 uni-app의 데이터 상태 관리에 중요한 부분입니다. 이 기사에서는 uni-app이 Vuex를 사용하여 로그인 기능을 구현하는 방법을 소개하고 이 방법을 통해 더 많은 상태 관리를 달성할 수 있습니다.

사전 지식

uni-app이 Vuex를 사용하여 로그인 기능을 구현하는 방법을 이해하기 전에 다음 관련 기술을 배워야 합니다.

• HTML 및 CSS 기본
• Vue.js 기본
• uni-app 기본
• Vuex 기본 지식

위 기술을 마스터했다면 계속해서 읽을 수 있습니다.

준비

다른 페이지 간 상태 전송을 시작하기 전에 다음 작업을 준비해야 합니다.

1. uni-app에서 새 프로젝트를 만들고 Vuex를 사용합니다. HBuilderX와 같은 도구를 사용하여 uni-app 프로젝트를 생성하고 기본적으로 Vuex를 통합하도록 선택할 수 있습니다.

2. HBuilderX에서 프로젝트를 열고 페이지 디렉토리에 Login.vue 파일을 만듭니다. App.vue 파일을 수정하고 해당 내용을 다음과 같이 수정합니다.

   <template>
     <div>
       <router-view />
     </div>
   </template>
   
   <script>
   export default {
     onLaunch() {
       uni.reLaunch({
         url: '/pages/login/login'
       })
     }
   }
   </script>

3. uni-app에 uni-request 라이브러리를 설치 및 구성하고 다음과 같이 main.js 파일 상단에 인용합니다.

   import uniRequest from 'uni-request';
           
   uniRequest.defaults.baseURL = 'http://localhost:3000/api';
           
   // 请求拦截器
   uniRequest.interceptors.request.use((config) => {
     const token = uni.getStorageSync('token') || '';
     config.headers.Authorization = token;
     return config;
   });
           
   // 响应拦截器
   uniRequest.interceptors.response.use((response) => {
     if (response.statusCode === 401) {
       uni.removeStorageSync('token');
       uni.reLaunch({
         url: '/pages/login/login'
       });
     }
     return response.data;
   }, (error) => {
     return Promise.reject(error);
   });

   uni-request 라이브러리를 사용하면 uni-app에서 HTTP 요청을 더 쉽게 만들 수 있습니다. uni-request 库使我们可以更方便地在 uni-app 中进行 HTTP 请求。

实现登录功能

在以上工作完成之后，我们可以开始实现登录功能了。下面是具体的实现方法：

1. 在 Login.vue 文件中编写登录表单，包括一个用户名输入框和一个密码输入框。代码如下：

   <template>
     <view class="container">
       <form @submit.prevent="handleSubmit">
         <view class="field">
           <input type="text" name="username" v-model="form.username" placeholder="请输入用户名" />
         </view>
         <view class="field">
           <input type="password" name="password" v-model="form.password" placeholder="请输入密码" />
         </view>
         <view class="field">
           <button class="btn" type="submit">登录</button>
         </view>
       </form>
     </view>
   </template>

2. 在 Login.vue 文件中创建一个 computed，用于检查用户名和密码是否为空，并在 methods 中编写一个 handleSubmit 方法，用于提交登录表单。代码如下：

   export default {
     data() {
       return {
         form: {
           username: '',
           password: ''
         }
       };
     },
     computed: {
       isFormValid() {
         return this.form.username.trim() !== '' && this.form.password.trim() !== '';
       }
     },
     methods: {
       async handleSubmit() {
         const data = await this.$store.dispatch('login', this.form);
         uni.setStorageSync('token', data.token);
         uni.reLaunch({
           url: '/pages/index/index'
         });
       }
     }
   };

3. 在 store 目录下创建一个 store.js 文件，并定义一个名为 user 的 Vuex 模块。这个模块包含以下三个部分：

   • state：状态对象，包含用户信息和 token。
   • getters：计算属性，用于派生新的状态，包括用户名和是否已登录。
   • actions：用于异步操作，包括登录和注销。

4. 在 store.js 中定义用于获取和设置当前用户信息的 state，以及用于计算新状态的 getters，代码如下：

   const state = {
     user: null,
     token: null
   };
   
   const getters = {
     username: (state) => {
       return state.user ? state.user.username : '';
     },
     isLoggedIn: (state) => {
       return !!state.token;
     }
   };

5. 在 store.js 中定义一个 mutations，用于更新 state。在这个示例中，我们将更新用户信息和 token。代码如下：

   const mutations = {
     setUser(state, user) {
       state.user = user;
     },
     setToken(state, token) {
       state.token = token;
     }
   };

6. 在 store.js 中定义一个 actions，用于异步调用后端服务器进行用户登录，并更新 state。你可以使用 uni-request 库来进行异步请求。代码如下：

   const actions = {
     async login({ commit }, { username, password }) {
       const { data } = await uniRequest.post('/login', { username, password });
       commit('setUser', data.user);
       commit('setToken', data.token);
       return data;
     }
   };

7. 在 store.js 中创建一个 index.js，用于暴露我们定义好的模块。代码如下：

   import Vue from 'vue';
   import Vuex from 'vuex';
   import user from './modules/user';
   
   Vue.use(Vuex);
   
   const store = new Vuex.Store({
     modules: {
       user
     }
   });
   
   export default store;

总结

在这篇文章中，我们学习了在 uni-app 中如何使用 Vuex 实现登录功能。我们还演示了如何使用 uni-request 库进行异步请求，以及如何定义 actions 和 mutations 来更新 state

로그인 기능 구현

🎜위 작업이 완료되면 로그인 기능 구현을 시작할 수 있습니다. 구체적인 구현 방법은 다음과 같습니다. 🎜🎜🎜🎜 Login.vue 파일에 사용자 이름 입력 상자와 비밀번호 입력 상자를 포함하여 로그인 양식을 작성합니다. 코드는 다음과 같습니다. 🎜rrreee🎜🎜🎜 Login.vue 파일에 computed를 생성하여 사용자 이름과 비밀번호가 비어 있는지 확인하고 methods에 <code>를 작성합니다. code> >handleSubmit 메소드, 로그인 양식을 제출하는 데 사용됩니다. 코드는 다음과 같습니다. 🎜rrreee🎜🎜🎜store 디렉터리에 store.js 파일을 만들고 user라는 Vuex 모듈을 정의합니다. 이 모듈은 다음 세 부분으로 구성됩니다. 🎜🎜🎜state: 사용자 정보 및 토큰을 포함한 상태 개체입니다. 🎜🎜getters: 사용자 이름 및 로그인 여부를 포함하여 새로운 상태를 파생하는 데 사용되는 계산된 속성입니다. 🎜🎜actions: 로그인 및 로그아웃을 포함한 비동기 작업에 사용됩니다. 🎜🎜🎜🎜🎜 현재 사용자 정보를 가져오고 설정하는 데 사용되는 state와 현재 사용자 정보를 계산하는 데 사용되는 getter를 store.js에서 정의하세요. new state >의 경우 코드는 다음과 같습니다. 🎜rrreee🎜🎜🎜 store.js에서 mutations를 정의하여 state를 업데이트합니다. 이번 예시에서는 사용자 정보와 토큰을 업데이트하겠습니다. 코드는 다음과 같습니다. 🎜rrreee🎜🎜🎜store.js에서 actions를 정의하여 사용자 로그인을 위해 백엔드 서버를 비동기적으로 호출하고 상태를 업데이트합니다. 코드>. uni-request 라이브러리를 사용하여 비동기 요청을 할 수 있습니다. 코드는 다음과 같습니다. 🎜rrreee🎜🎜🎜 store.js에 index.js를 생성하여 우리가 정의한 모듈을 노출합니다. 코드는 다음과 같습니다. 🎜rrreee🎜🎜Summary🎜🎜 이번 글에서는 Vuex를 사용하여 uni-app에서 로그인 기능을 구현하는 방법을 알아보았습니다. 또한 uni-request 라이브러리를 사용하여 비동기 요청을 만드는 방법과 작업 및 변형을 정의하여 상태를 업데이트하는 방법도 시연했습니다. 데이터는 . 🎜🎜Vuex를 사용하면 애플리케이션 상태를 더 쉽게 관리하고 복잡한 애플리케이션을 신속하게 개발하는 데 도움이 될 수 있습니다. uni-app에서 크로스 플랫폼 애플리케이션을 개발할 계획이라면 Vuex 사용법을 익히는 것이 매우 중요합니다. 🎜

위 내용은 vuex를 사용하여 uniapp에서 로그인 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!