So verwenden Sie Vuex, um die Anmeldefunktion in Uniapp zu implementieren

Vue.js ist heute eines der beliebtesten JavaScript-Frameworks in der Frontend-Entwicklung. Und uni-app ist ein Framework für die Entwicklung plattformübergreifender Anwendungen mithilfe von Vue.js. Vuex ist die Zustandsverwaltungsbibliothek von Vue.js und ein wichtiger Bestandteil der Datenzustandsverwaltung in Uni-App. In diesem Artikel stellen wir vor, wie Uni-App Vuex zur Implementierung der Anmeldefunktion verwendet und mit dieser Methode eine bessere Statusverwaltung erreichen kann.

Vorausgesetzte Kenntnisse

Bevor Sie verstehen, wie Uni-App Vuex verwendet, um die Anmeldefunktion zu implementieren, müssen Sie die folgenden verwandten Technologien erlernen:

• HTML- und CSS-Grundlagen
• Vue.js-Grundlagen
• Uni-App-Grundlagen
• Vuex-Grundkenntnisse

Wenn Sie die oben genannten Techniken beherrschen, können Sie weiterlesen.

Vorbereitung

Bevor wir mit der Statusübertragung zwischen verschiedenen Seiten beginnen, müssen wir die folgende Arbeit vorbereiten:

1. Erstellen Sie ein neues Projekt in der Uni-App und verwenden Sie Vuex. Sie können Tools wie HBuilderX verwenden, um Uni-App-Projekte zu erstellen und Vuex standardmäßig zu integrieren.

2. Öffnen Sie das Projekt in HBuilderX und erstellen Sie eine Login.vue-Datei im Seitenverzeichnis. Ändern Sie die App.vue-Datei und ihren Inhalt wie folgt:

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

3. Installieren und konfigurieren Sie die Uni-Request-Bibliothek in Uni-App und zitieren Sie sie oben in der main.js-Datei wie folgt:

   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-Bibliothek erleichtert uns das Stellen von HTTP-Anfragen in 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

Implementierung der Anmeldefunktion

🎜Nachdem die oben genannten Arbeiten abgeschlossen sind, können wir mit der Implementierung der Anmeldefunktion beginnen. Das Folgende ist die spezifische Implementierungsmethode: 🎜🎜🎜🎜Schreiben Sie ein Anmeldeformular in die Datei Login.vue, einschließlich eines Benutzernamen-Eingabefelds und eines Passwort-Eingabefelds. Der Code lautet wie folgt: 🎜rrreee🎜🎜🎜Erstellen Sie einen berechneten in der Datei Login.vue, um zu prüfen, ob der Benutzername und das Passwort leer sind, und schreiben Sie einen in <code>methoden code> >handleSubmit-Methode, die zum Absenden des Anmeldeformulars verwendet wird. Der Code lautet wie folgt: 🎜rrreee🎜🎜🎜Erstellen Sie eine store.js-Datei im Store-Verzeichnis und definieren Sie ein Vuex-Modul mit dem Namen user. Dieses Modul enthält die folgenden drei Teile: 🎜🎜🎜state: Statusobjekt, einschließlich Benutzerinformationen und Token. 🎜🎜getters: Berechnete Eigenschaften, die zum Ableiten neuer Zustände verwendet werden, einschließlich Benutzername und ob angemeldet. 🎜🎜actions: Wird für asynchrone Vorgänge verwendet, einschließlich An- und Abmeldung. 🎜🎜🎜🎜🎜 Definieren Sie in store.js den Status, der zum Abrufen und Festlegen der aktuellen Benutzerinformationen verwendet wird, und die Getter, die zum Berechnen des verwendet werden neuer Zustand >, der Code lautet wie folgt: 🎜rrreee🎜🎜🎜Definieren Sie eine mutations in store.js, um state zu aktualisieren. In diesem Beispiel aktualisieren wir Benutzerinformationen und Token. Der Code lautet wie folgt: 🎜rrreee🎜🎜🎜Definieren Sie eine action in store.js, um den Backend-Server für die Benutzeranmeldung asynchron aufzurufen und den statezu aktualisieren Code>. Sie können die Bibliothek uni-request verwenden, um asynchrone Anfragen zu stellen. Der Code lautet wie folgt: 🎜rrreee🎜🎜🎜Erstellen Sie eine index.js in store.js, um die von uns definierten Module verfügbar zu machen. Der Code lautet wie folgt: 🎜rrreee🎜🎜Zusammenfassung🎜🎜In diesem Artikel haben wir gelernt, wie man Vuex verwendet, um die Anmeldefunktion in Uni-App zu implementieren. Wir haben auch gezeigt, wie man die uni-request-Bibliothek verwendet, um asynchrone Anfragen zu stellen, und wie man Aktionen und Mutationen definiert, um den Status zu aktualisieren Daten in . 🎜🎜Mit Vuex können wir den Status unserer Anwendung einfacher verwalten und komplexe Anwendungen schnell entwickeln. Wenn Sie plattformübergreifende Anwendungen in Uni-App entwickeln möchten, ist es sehr wichtig, die Verwendung von Vuex zu beherrschen. 🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vuex, um die Anmeldefunktion in Uniapp zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!