朝阳区社区建设网站360安全浏览器

持久化失效卡了一天的问题

安装使用就不多说了，主要是针对持久化失效的几个问题说明和解决方法

首先是组合式写法，配置持久化

export const useUserStore = defineStore('user', () => {},{persist: true}
)

defineStore 第三个参数，具体可以看 pinia-plugin-persistedstate 相关文档

1，网上最多的是关于路由中使用导致失效问题

主要是获取数据时候，pinia还没有完全加载完全，导致路由期间获取不到，解决方法很简单，加载的时候选择路由加载完成再继续

// 路由加载完成后挂载
router.isReady().then(() => {app.use(pinia).mount('#app')
});

还又一个做路由守卫的时候，把获取store方法写到函数中，不要写到最外层，举个官方例子

import { createRouter } from 'vue-router'
const router = createRouter({// ...
})// ❌ 由于引入顺序的问题，这将失败
const store = useStore()router.beforeEach((to, from, next) => {// 我们想用这里的 storeif (store.isLoggedIn) next()else next('/login')
})//  上面就是 const store = useStore() 写到外面，里面获取出错，下面是正确写法router.beforeEach((to) => {// ✅ 这样做是可行的，因为路由器在安装完之后就会开始导航。// Pinia 也将被安装。const store = useStore()if (to.meta.requiresAuth && !store.isLoggedIn) return '/login'
})

2，初始化后本地存储没有，后来经过测试发现是store里面的数据，必须改变一次才能保存，也就是说如果我第一次调用没有设置过数据，是默认数据，是不会持久化保存的（默认数据好像也没有必要保存吧），当然也可能又其他配置可以初始化保存，暂时没有找到相关文档说明

3，（我主要问题）上面配置都好了，组合式不能持久化，测试 Option Store 没有问题

这个主要就是组合式的写法问题导致的，组合式的写法，必须最后retrun的部分才会再$state里面，我写的时候，因为写一个getUser()这样的函数，所有只是返回了这个函数没有返回user这个对象，导致user这个对象一直不能持久化，最后测试发现这个问题的测试方案如下：

自己写一个pinia的插件

const piniaPlugin = (context: PiniaPluginContext) => {// 打印出store的所有内容console.log("context", context)
}// 创建pinia实例
const pinia = createPinia()
pinia.use(piniaPlugin)

然后我解析了contex发现没有user，也就是说，我无论怎么改变user没有return出来的$state对象里面没有就不会持久化保存 ，pinia-plugin-persistedstate 只会保存$state里面的对象，而组合式的没有return出来的 ref 或者 reactive 对象都不会到$state对象中，所有一定要注意

不知道是不是pinia不推荐 组合式 的写法还是什么原因，感觉组合式的例子没有几个，网上用的也很少，资料也找不到，只能自己慢慢测试，先记录一下问题吧，防止后面又遇到