1.引言

最近在學習移動端的開發，使用uni-app前端應用框架，通過學習B站的視頻以及找了一個開發模板，終于是有了一些心得體會。
B站視頻1：Day1-01-uni-app小兔鮮兒導學視頻_嗶哩嗶哩_bilibili

B站視頻2：01-課程和uni的基本介紹_嗶哩嗶哩_bilibili

開發模板：簡介 | unibest

2.代碼

代碼主要分為三個部分，第一是初始化Pinia，第二是在main.ts中引入，第三是定義全局狀態。

1.初始化Pinia

import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-plugin-persistedstate' // 數據持久化const store = createPinia()
store.use(createPersistedState({storage: {getItem: uni.getStorageSync,setItem: uni.setStorageSync,},}),
)export default store// 模塊統一導出 這個是定義的用戶信息持久化的文件路徑
export * from './modules/user'

2.main.ts引入

import { createSSRApp } from 'vue'
import App from './App.vue'
import store from './store'export function createApp() {const app = createSSRApp(App)app.use(store)return {app,}
}

3.定義用戶信息的持久化狀態

import { defineStore } from 'pinia'// 默認信息const initUserInfo: IUserInfo = {permissions: [],roles: [],isLogin: false,user: {id: 0,avatar: '',username: '',nickname: '',code: '',},dept: {id: 0,name: '',deptId: '',},
}export const useUserStore = defineStore('user',() => {// 默認的用戶信息const userInfo = ref<IUserInfo>(initUserInfo)// 存儲用戶信息const setUserInfo = (val: IUserInfo): void => {userInfo.value = valuserInfo.value.isLogin = true}// 清除用戶信息const clearUserInfo = (): void => {userInfo.value = initUserInfo}// 千萬不要忘記返回return {userInfo,setUserInfo,clearUserInfo,}},{// 網頁端配置// persist: true,// 小程序端配置persist: {storage: {getItem(key) {return uni.getStorageSync(key)},setItem(key, value) {uni.setStorageSync(key, value)},},},},
)

3.效果展示

在登錄界面，使用用戶名密碼登錄后，調用獲取用戶信息的接口進行存儲并持久化。

關鍵代碼

import { useUserStore } from '@/store'
// 人員信息
const userStore = useUserStore()// 登錄系統 一進系統就需要登錄
const handleLogin = async () => {const loginRes = await loginApi.login(loginForm)const userInfoRes = permissionApi.getUserPermissionInfo()userStore.setUserInfo((await userInfoRes).data)uni.switchTab({ url: '/pages/index/index' })
}

登錄之前

登錄后

4.寫在最后

本文內容不復雜，個人理解代碼也比較簡單，主要是把整體的框架搭起來后，添加對應的狀態管理，攔截器等就簡單很多。

感謝unibest模板，雖然模板需要自己改善的地方還有很多，但已經提供了足夠的便利了。
另外，自己也是剛學習移動端，有諸多需要加強的地方，如有遺漏，不吝賜教。