How to use vuex to implement login function in uniapp

Vue.js is one of the most popular JavaScript frameworks in front-end development today. And uni-app is a framework for developing cross-platform applications using Vue.js. Vuex is the state management library of Vue.js and an important part of data state management in uni-app. In this article, we will introduce how uni-app uses Vuex to implement the login function, and can achieve more state management through this method.

Prerequisite knowledge

Before understanding how uni-app uses Vuex to implement the login function, you need to learn the following related technologies:

• HTML and CSS basics
• Vue.js basic knowledge
• uni-app basic knowledge
• Vuex basic knowledge

If you have mastered the above technologies, you can continue reading.

Preparation work

Before starting the state transfer between different pages, we need to prepare the following work:

1. Create a new project in uni-app and Use Vuex. You can use tools such as HBuilderX to create a uni-app project and choose to integrate Vuex by default.

2. Open the project in HBuilderX and create a Login.vue file in the pages directory. Modify the App.vue file and modify its content as follows:

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

3. Install and configure the uni-request library in uni-app and quote it at the top of the main.js file as follows:

   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 The library makes it easier for us to make HTTP requests in uni-app.

Implementing the login function

After the above work is completed, we can start to implement the login function. The following is the specific implementation method:

1. Write the login form in the Login.vue file, including a username input box and a password input box. The code is as follows:

   <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. Create a computed in the Login.vue file to check whether the user name and password are empty, and create a methods Write a handleSubmit method in # to submit the login form. The code is as follows:

   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. Create a store.js file in the store directory and define a Vuex module named user. This module contains the following three parts:

   • state: state object, including user information and token.
   • getters: Computed properties used to derive new states, including username and whether logged in.
   • actions: used for asynchronous operations, including login and logout.

4. Define state in store.js for getting and setting the current user information, and for calculating the new state The getters, the code is as follows:

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

5. Define a mutations in store.js for updatestate. In this example, we will update user information and token. The code is as follows:

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

6. Define an actions in store.js, which is used to asynchronously call the back-end server for user login and update state. You can use the uni-request library to make asynchronous requests. The code is as follows:

   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. Create an index.js in store.js to expose the modules we defined. The code is as follows:

   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;

Summary

In this article, we learned how to use Vuex to implement the login function in uni-app. We also demonstrated how to use the uni-request library to make asynchronous requests, and how to define actions and mutations to update data in state .

Using Vuex can make it easier for us to manage the state of our application and help us quickly develop complex applications. If you plan to develop cross-platform applications in uni-app, it is very important to master the use of Vuex.

The above is the detailed content of How to use vuex to implement login function in uniapp. For more information, please follow other related articles on the PHP Chinese website!