uniapp怎麼用vuex實現登入功能

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 中開啟專案並且在 pages 目錄下建立一個 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 請求。

實作登入功能

在以上工作完成之後，我們可以開始實作登入功能了。以下是具體的實作方法：

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 中的數據。

使用 Vuex 可以讓我們更輕鬆地管理應用程式的狀態，並幫助我們快速開發複雜的應用程式。如果你打算在 uni-app 中開發跨平台應用，那麼掌握 Vuex 的使用是非常重要的。

以上是uniapp怎麼用vuex實現登入功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！