uniapp怎麼用vuex實現登入功能-uni-app-PHP中文網

前置知識

準備工作

實作登入功能

總結

首頁

web前端

uni-app

uniapp怎麼用vuex實現登入功能

PHPz

Apr 20, 2023 pm 01:55 PM

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 基礎

如果你已經掌握以上技術，可以繼續閱讀。

準備工作

在開始不同頁面之間的狀態傳遞之前，我們需要準備以下工作：

在uni-app 中建立一個新專案並使用Vuex。可以使用 HBuilderX 等工具來建立 uni-app 項目，並且選擇預設整合 Vuex。

在 HBuilderX 中開啟專案並且在 pages 目錄下建立一個 Login.vue 檔案。修改App.vue 文件，將其內容修改如下：

<template>
  <div>
    <router-view />
  </div>
</template>

<script>
export default {
  onLaunch() {
    uni.reLaunch({
      url: '/pages/login/login'
    })
  }
}
</script>

登入後複製

安裝並配置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 請求。

實作登入功能

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

在 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>

登入後複製

在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'
      });
    }
  }
};

登入後複製

在 store 目錄下建立一個 store.js 文件，並定義一個名為 user 的 Vuex 模組。這個模組包含以下三個部分：
- state：狀態對象，包含使用者資訊和 token。
- getters：計算屬性，用於衍生新的狀態，包括使用者名稱和是否已登入。
- actions：用於非同步操作，包括登入和登出。

在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;
  }
};

登入後複製

在store.js 中定義一個mutations，用於更新state。在這個範例中，我們將更新使用者資訊和 token。程式碼如下：

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

登入後複製

在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;
  }
};

登入後複製

在 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;

登入後複製