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 文件,將其內容修改如下:
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>
|
登入後複製
-
安裝並配置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 請求。
實作登入功能
在以上工作完成之後,我們可以開始實作登入功能了。以下是具體的實作方法:
-
在 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>
|
登入後複製
-
在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'
});
}
}
};
|
登入後複製
-
在 store 目錄下建立一個 store.js
文件,並定義一個名為 user
的 Vuex 模組。這個模組包含以下三個部分:
-
state
:狀態對象,包含使用者資訊和 token。
-
getters
:計算屬性,用於衍生新的狀態,包括使用者名稱和是否已登入。
-
actions
:用於非同步操作,包括登入和登出。
-
在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;
}
};
|
登入後複製
-
在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;
}
};
|
登入後複製
-
在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;
}
};
|
登入後複製
-
在 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
函式庫進行非同步請求,以及如何定義actions
和mutations
來更新state
中的數據。
使用 Vuex 可以讓我們更輕鬆地管理應用程式的狀態,並幫助我們快速開發複雜的應用程式。如果你打算在 uni-app 中開發跨平台應用,那麼掌握 Vuex 的使用是非常重要的。
以上是uniapp怎麼用vuex實現登入功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!