首頁 > web前端 > uni-app > uniapp怎麼用vuex實現登入功能

uniapp怎麼用vuex實現登入功能

PHPz
發布: 2023-04-20 14:02:08
原創
1495 人瀏覽過

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 文件,將其內容修改如下:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    <template>

      <div>

        <router-view />

      </div>

    </template>

     

    <script>

    export default {

      onLaunch() {

        uni.reLaunch({

          url: '/pages/login/login'

        })

      }

    }

    </script>

    登入後複製
  3. 安裝並配置uni-app 中的uni-request 庫,在main.js 文件的頂部引用如下:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    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 檔案中編寫登入表單,包括一個使用者名稱輸入框和一個密碼輸入框。程式碼如下:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    <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 方法,用於提交登入表單。程式碼如下:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    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,程式碼如下:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    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。程式碼如下:

    1

    2

    3

    4

    5

    6

    7

    8

    const mutations = {

      setUser(state, user) {

        state.user = user;

      },

      setToken(state, token) {

        state.token = token;

      }

    };

    登入後複製
  6. store.js 中定義一個actions,用於非同步呼叫後端伺服器進行使用者登錄,並更新state。你可以使用 uni-request 函式庫來進行非同步請求。程式碼如下:

    1

    2

    3

    4

    5

    6

    7

    8

    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,用來揭露我們定義好的模組。程式碼如下:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    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 函式庫進行非同步請求,以及如何定義actionsmutations 來更新state 中的數據。

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

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

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板