uni-app三部曲之一： Pinia使用

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

登录之前