uniapp+pinia持久化

在小程序开发中，涉及到状态管理的部分依旧可以使用pinia来实现，具体用法与vue项目中几乎完全一样，但是在uniapp中持久化的写法略有不同，以前我们做持久化主要是网页端，通常使用localStorage来进行存储和读取，但是在小程序端，我们无法直接使用localStorage的api，传统小程序用到的API是wx.setStorageSync()和wx.getStorageSync()，而在uniapp中，升级为uni.setStorageSync()和uni.getStorageSync()，这样就可以达到兼容多端的效果，接下来就看具体实现：

第一步，安装pinia依赖

执行命令

npm i pinai@2.0.36 

npm i pinia-plugin-persistedstate

注意，pinia和vue的版本要兼容，我这里使用的是vue@3.3.31、pinia@2.0.36

第二步，引入封装pinia

在pages同级目录下创建stores目录，然后新建index.ts,代码如下：

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'

//创建pinia实例
const pinia = createPinia()
//使用持久化存储插件
pinia.use(persist)

//默认导出 给main.ts使用
export default pinia

然后别忘记在main.ts中初始化pinia:

import { createSSRApp } from 'vue'
import App from './App.vue'

//导入pinia
import pinia from './stores'

export function createApp() {
  //vue实例
  const app = createSSRApp(App)

  //使用pinia
  app.use(pinia)

  return {
    app,
  }
}

新建一个业务store，用来存储用户信息：

import { defineStore } from 'pinia'
import { ref } from 'vue'
//定义登录人员信息store
export const userInfoStore = defineStore(
  'userInfo',
  () => {
    //登录人员信息
    const info = ref()

    //保存登录人员信息
    const setUserInfo = (val: any) => {
      info.value = val
    }

    //清理登录人员信息
    const clearUserInfo = () => {
      info.value = undefined
    }

    return {
      info,
      setUserInfo,
      clearUserInfo,
    }
  },
  //持久化
  {
    persist: {
      storage: {
        getItem(key) {
          return uni.getStorageSync(key)
        },
        setItem(key, val) {
          uni.setStorageSync(key, val)
        },
      },
    },
  }
)

第三步，使用pinia

在业务页面中引入strore，登录成功后，把用户信息存储到store中，

import { userInfoStore } from '@/stores/modules/userInfo'
...
const store = userInfoStore()
...
    store.setUserInfo({
        bureau_id: bureau_id,
        bureau_name: bureau_name,
        person_id: person_id,
        person_name: person_name,
        identity_id: identity_id,
        dep_id: dep_id,
        dep_name: dep_name,
        token: token,
      })

这样就可以把用户信息持久化存储了。