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

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

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

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数据改变没有保存本地，具体可以参考我写的另一个文章

https://blog.csdn.net/u012533474/article/details/130455888