Comment utiliser vuex pour implémenter la fonction de connexion dans Uniapp

Vue.js est aujourd'hui l'un des frameworks JavaScript les plus populaires dans le développement front-end. Et uni-app est un framework permettant de développer des applications multiplateformes à l'aide de Vue.js. Vuex est la bibliothèque de gestion d'état de Vue.js et une partie importante de la gestion de l'état des données dans uni-app. Dans cet article, nous présenterons comment uni-app utilise Vuex pour implémenter la fonction de connexion et peut obtenir davantage de gestion de l'état grâce à cette méthode.

Connaissances préalables

Avant de comprendre comment uni-app utilise Vuex pour implémenter la fonction de connexion, vous devez apprendre les technologies connexes suivantes :

• Bases de HTML et CSS
• Bases de Vue.js
• Bases d'uni-app
• Connaissances de base de Vuex

Si vous maîtrisez les techniques ci-dessus, vous pouvez continuer à lire.

Préparation

Avant de commencer le transfert d'état entre différentes pages, nous devons préparer le travail suivant :

1. Créer un nouveau projet dans uni-app et utiliser Vuex. Vous pouvez utiliser des outils tels que HBuilderX pour créer des projets uni-app et choisir d'intégrer Vuex par défaut.

2. Ouvrez le projet dans HBuilderX et créez un fichier Login.vue dans le répertoire des pages. Modifiez le fichier App.vue et modifiez son contenu comme suit :

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

3. Installez et configurez la bibliothèque uni-request dans uni-app, et citez-la en haut du fichier main.js comme suit :

   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 nous permet d'effectuer plus facilement des requêtes HTTP dans uni-app. 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

Implémentation de la fonction de connexion

🎜Une fois le travail ci-dessus terminé, nous pouvons commencer à implémenter la fonction de connexion. Voici la méthode de mise en œuvre spécifique : 🎜🎜🎜🎜Écrivez un formulaire de connexion dans le fichier Login.vue, comprenant une zone de saisie du nom d'utilisateur et une zone de saisie du mot de passe. Le code est le suivant : 🎜rrreee🎜🎜🎜Créez un calculé dans le fichier Login.vue pour vérifier si le nom d'utilisateur et le mot de passe sont vides, et écrivez un dans <code>méthodes code> >handleSubmit, utilisée pour soumettre le formulaire de connexion. Le code est le suivant : 🎜rrreee🎜🎜🎜Créez un fichier store.js dans le répertoire du magasin et définissez un module Vuex nommé user. Ce module contient les trois parties suivantes : 🎜🎜🎜state : objet d'état, comprenant les informations utilisateur et le jeton. 🎜🎜getters : propriétés calculées, utilisées pour dériver de nouveaux états, y compris le nom d'utilisateur et le fait d'être connecté. 🎜🎜actions : utilisé pour les opérations asynchrones, y compris la connexion et la déconnexion. 🎜🎜🎜🎜🎜 Définissez dans store.js le state utilisé pour obtenir et définir les informations de l'utilisateur actuel, et les getters utilisés pour calculer le new state >, le code est le suivant : 🎜rrreee🎜🎜🎜Définissez une mutations dans store.js pour mettre à jour state. Dans cet exemple, nous mettrons à jour les informations utilisateur et le jeton. Le code est le suivant : 🎜rrreee🎜🎜🎜Définissez une actions dans store.js pour appeler de manière asynchrone le serveur backend pour la connexion de l'utilisateur et mettre à jour l'étatcode>. Vous pouvez utiliser la bibliothèque uni-request pour effectuer des requêtes asynchrones. Le code est le suivant : 🎜rrreee🎜🎜🎜Créez un index.js dans store.js pour exposer les modules que nous avons définis. Le code est le suivant : 🎜rrreee🎜🎜Résumé🎜🎜Dans cet article, nous avons appris comment utiliser Vuex pour implémenter la fonction de connexion dans uni-app. Nous avons également montré comment utiliser la bibliothèque uni-request pour effectuer des requêtes asynchrones, et comment définir des actions et des mutations pour mettre à jour state. données dans . 🎜🎜L'utilisation de Vuex peut nous faciliter la gestion de l'état de notre application et nous aider à développer rapidement des applications complexes. Si vous envisagez de développer des applications multiplateformes en uni-app, il est très important de maîtriser l'utilisation de Vuex. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!