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

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模板，虽然模板需要自己改善的地方还有很多，但已经提供了足够的便利了。

另外，自己也是刚学习移动端，有诸多需要加强的地方，如有遗漏，不吝赐教。