pinia + pinia-plugin-persistedstate + 组合式API 写法,持久化失效问题
2,初始化后本地存储没有,后来经过测试发现是store里面的数据,必须改变一次才能保存,也就是说如果我第一次调用没有设置过数据,是默认数据,是不会持久化保存的(默认数据好像也没有必要保存吧),当然也可能又其他配置可以初始化保存,暂时没有找到相关文档说明。不知道是不是pinia不推荐 组合式 的写法还是什么原因,感觉组合式的例子没有几个,网上用的也很少,资料也找不到,只能自己慢慢测试,先记录一下问题
持久化失效卡了一天的问题
安装使用就不多说了,主要是针对持久化失效的几个问题说明和解决方法
首先是组合式写法,配置持久化
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) => {
// 我们想用这里的 store
if (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不推荐 组合式 的写法还是什么原因,感觉组合式的例子没有几个,网上用的也很少,资料也找不到,只能自己慢慢测试,先记录一下问题吧,防止后面又遇到
本地持久化后来又发现了一个问题,使用组件式API数据改变没有保存本地,具体可以参考我写的另一个文章
更多推荐
所有评论(0)