vue3中pinia使用持久化管理

安装插件

npm install pinia pinia-plugin-persist

pinia进行注册

创建index.ts

import { createPinia } from 'pinia';
//对外暴露大仓库
export default createPinia();

在mian.ts

//引入pinpa
import { createApp } from 'vue'
//引入根组件
import App from './App.vue'
const app = createApp(App)
import Pinia from './store/index'
//注册Pinpa持久化插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
Pinia.use(piniaPluginPersistedstate)
app.use(Pinia)
app.mount('#app')

调用

import {defineStore} from 'pinia'
import {reqCode,reqUserLogin} from '../../api/hospital/index'
import {PhoneTy} from '../../api/hospital/type'
const useUserStore = defineStore('User',{
    state:()=>{
        return{
            visiable: false,//用于控制登录组件的dialog显示与隐藏
            code: '',//存储用户的验证码,
            //存储用户的信息
            userInfo:JSON.parse(localStorage.getItem('USERINFO') as string) || {}
        }
    },
    actions:{
        //获取短信验证
      async  getCode(value:string){
         const r:PhoneTy = await reqCode(value) as any
         if(r.code == 200){
            this.code = r.data
        
            // console.log(this.code,'this.code1')
         }
         console.log(this.code,'this.code2')
         
        },
        //登陆用户
        async reqUserLogin(value:object){
          const r = await reqUserLogin(value)
          this.userInfo = r.data
          
        //   localStorage.setItem('USERINFO',JSON.stringify(this.userInfo))
          console.log(r)
        }
    },
    // 在这里进行自定义配置
  persist: {
    key:'USERINFO', // 存储的key, 默认store.$id
    // storage: sessionStorage, // 存储的类型，默认localStorage
    paths:['userInfo']// 指定 state 中哪些数据需要被持久化, 默认undefined
  }

})
export default useUserStore

即使是对象数组，也可以直接放进去，不需要JSON转换

取值的话需要转换

userInfo:JSON.parse(localStorage.getItem('USERINFO') as string) || {}

使用的话正常和存储在本地一样调用就行