1.引言
最近在学习移动端的开发,使用uni-app前端应用框架,通过学习B站的视频以及找了一个开发模板,终于是有了一些心得体会。
B站视频1:Day1-01-uni-app小兔鲜儿导学视频_哔哩哔哩_bilibili
B站视频2:01-课程和uni的基本介绍_哔哩哔哩_bilibili
开发模板:简介 | unibest
2.代码
代码主要分为三个部分,第一是初始化Pinia,第二是在main.ts中引入,第三是定义全局状态。
1.初始化Pinia
TypeScript
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引入
TypeScript
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.定义用户信息的持久化状态
TypeScript
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 = val
userInfo.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.效果展示
在登录界面,使用用户名密码登录后,调用获取用户信息的接口进行存储并持久化。
关键代码
TypeScript
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模板,虽然模板需要自己改善的地方还有很多,但已经提供了足够的便利了。
另外,自己也是刚学习移动端,有诸多需要加强的地方,如有遗漏,不吝赐教。