vue3的pinia持久化存储数据正确方式

1.安装插件（pinia-plugin-persistedstate），记得先安装pinia

npm i pinia-plugin-persistedstate

2.引入

src文件夹下创建store文件夹并创建文件如下目录：

index.js文件引入：

import { createPinia } from 'pinia'
// import piniaPluginPersist from 'pinia-plugin-persist'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
// pinia.use(piniaPluginPersist)
pinia.use(piniaPluginPersistedstate)
export default pinia

main.js文件引入

import pinia from './store/index'

const app = createApp(App)

app.use(pinia)//pinia状态管理

app.mount('#app')

创建缓存文件内容，例如user.js

import { defineStore } from 'pinia' // 定义一个pinia的一个模块

//'第一个参数是id标识，pinia的名字'，'第二个参数是个对象' useUserStore一般规范前面加上use
export const useUserStore = defineStore('user', {
  state: () => {
    return {
      username: "",//姓名
      dept: [],//身份
      id: "",
    }
  },
  actions: {
    // 退出登录
    loginout() {
      window.sessionStorage.removeItem('token')
      window.sessionStorage.removeItem('usermenu')
      window.localStorage.removeItem('userForm')
      this.username = ""
      this.dept = []
      this.usermenu = []
      this.id = ""
    }
  },
  getters: {
    // getCount(state) {//在使用时，把方法名当属性用就行
    //   return state.count * state.price
    // }
  },
  // 开启数据持久化  序列化和反序列化
  persist: {
    storage: sessionStorage,
    serializer: {
      deserialize: JSON.parse, //JSON.parse
      serialize: JSON.stringify//JSON.stringify
    }
  }
})

正常.vue文件引用

<script setup>
import { useUserStore } from "@/store/user.js";

const store = useUserStore()
store.username = "小明"

</script>

在router/index.js中使用

import pinia from '@/store';
import { useHistoryrouteStore } from "@/store/historyroute";

......


router.beforeEach((to, from, next) => {
  
  const store = useHistoryrouteStore(pinia)//最好在这里声明
  // 白名单直接进入
  if (whiteList.includes(to.path)) {
    return next()
  }

  // 非白名单，需要登录后获取token才可以访问
  const token = window.sessionStorage.getItem('token')
  if (!token) {
    return router.push('/login')
  } else {
    // console.log("router", to)
    return next()
  }
})