pinia持久化缓存

项目中有以下两个场景， 用pinia持久化解决了。

1. 项目中使用pinia来储存登录人信息， 个别页面需要判断登录人的权限来开放访问， 我们项目是在路由钩子里获取用户权限相关字段， 然后判断要不要继续跳转的， 这样就会出现一个问题， 当用户在需要权限的页面刷新网页， 用户个人信息还没获取到， 走到路由钩子的时候， 就判断不了是否有权限， 会返回到不需要权限的首页， 用户体验不好。
2. 页面有个返回按钮， 需要判断有没有有效的历史记录（这里也有一些业务判断， 某些页面需要忽略掉）， 当用户刷新当前页面， 储存在pinia里面的数据就清空了， 不符合产品的要求。 项目中使用pinia持久化缓存可以使用pinia-plugin-persist插件， 使用方法很简单： 首先， 在引入pinia的地方， 引入pinia-plugin-persist

// stores/index.js

import Vue from 'vue'
import { createPinia, PiniaVuePlugin } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'
Vue.use(PiniaVuePlugin)
const pinia = createPinia()
pinia.use(piniaPersist)
export default pinia

然后在原本的store文件里面， defineStore函数加上第三个参数， 设置persist。

// stores/user.js

import { ref } from 'vue'
import { defineStore } from 'pinia'

export const useUserStore = defineStore(
  'user',
  () => {
    const userInfo = ref({})
    return { userInfo }
  },
+  {
+    persist: {
+      enabled: true, // true 表示开启持久化保存
+    },
+  }
)

这样， 上面两个场景就都解决啦。