Pinia踩坑日记

Pinia 踩坑日记

Pinia使用起来跟vuex差不多，但是我相信大家有很多人都是跟我一样，vue2就使用vuex，vue3就使用Pinia，这导致有很多变动的坑要踩，这里我就记录一下我遇到的问题和解决方法。

一、Pinia踩坑之持久化

我觉得pinia优点之一就是持久化了，之前的项目我一直使用的是pinia-plugin-persist，恰巧那个项目并没有使用ts，使用起来并没有遇到什么问题，但是这次写项目的时候用了ts，在集成pinia的时候，使用持久化插件的时候出现了重载问题，大概是以下的问题。

没有与此调用匹配的重载。
  第 1 个重载(共 3 个)，“(id: "dataStore", options: Omit<DefineStoreOptions<"dataStore", { xiaohu: string; userinfo: {}; asideWidth: string; tabList: { path: string; title: string; }[]; activeTab: string; }, {}, { handleAsideWidth(): void; getDefault(route: string): void; addTabs(tab: any): void; }>, "id">): StoreDefinition<...>”，出现以下错误。
    类型“{ persist: { enabled: boolean; strategies: { storage: Storage; paths: string[]; }[]; }; state: () => { xiaohu: string; userinfo: {}; asideWidth: string; tabList: { path: string; title: string; }[]; activeTab: string; }; actions: { ...; }; getters: {}; }”的参数不能赋给类型“Omit<DefineStoreOptions<"dataStore", { xiaohu: string; userinfo: {}; asideWidth: string; tabList: { path: string; title: string; }[]; activeTab: string; }, {}, { handleAsideWidth(): void; getDefault(route: string): void; addTabs(tab: any): void; }>, "id">”的参数。
      对象字面量只能指定已知属性，并且“persist”不在类型“Omit<DefineStoreOptions<"dataStore", { xiaohu: string; userinfo: {}; asideWidth: string; tabList: { path: string; title: string; }[]; activeTab: string; }, {}, { handleAsideWidth(): void; getDefault(route: string): void; addTabs(tab: any): void; }>, "id">”中。
  第 2 个重载(共 3 个)，“(id: "dataStore", storeSetup: () => unknown, options?: DefineSetupStoreOptions<"dataStore", _UnwrapAll<Pick<unknown, never>>, Pick<unknown, never>, Pick<unknown, never>> | undefined): StoreDefinition<...>”，出现以下错误。
    类型“{ persist: { enabled: boolean; strategies: { storage: Storage; paths: string[]; }[]; }; state: () => { xiaohu: string; userinfo: {}; asideWidth: string; tabList: { path: string; title: string; }[]; activeTab: string; }; actions: { ...; }; getters: {}; }”的参数不能赋给类型“() => unknown”的参数。
      对象字面量只能指定已知属性，并且“persist”不在类型“() => unknown”中。ts(2769)
(property) persist: {
    enabled: boolean;
    strategies: {
        storage: Storage;
        paths: string[];
    }[];
}

首先经过我百度，发现pinia-plugin-persist这个插件对ts好像并没有支持，于是换成了pinia-plugin-persistedstate，但是还是有重载的问题，这个时候我就怀疑是persist这个持久化属性上有字段发生了变更，代码自动补全也验证了我的猜想，我就开始找相关文档，因为我一般都是先百度问题，解决不了才看官方文档的，一般小问题确实那一套解决起来很快，但是这种问题百度确实是浪费了很多时间。

比如上面这个图黑框中的部分，误导了我很长时间，在新版pinia-plugin-persistedstate中，paths已经没有了。

Configuration | Pinia Plugin Persistedstate (prazdevs.github.io)

变成了我红框中的部分，大家其实也可以通过vscode点到persist的类型声明那里知晓。

换成pick就解决了重载的这个问题，然后持久化还会遇到一个问题，就是必须在路由守卫里持久化才生效。

这个问题大家到时候试试就知道了，我确实尝试了只有这样才能实现持久化，其实不嫌麻烦大家可以自己手动localstorage存，我业务场景没有这个必要，所以还是放在了路由守卫那里。

持续踩坑中…