pinia的持久化存储

序言：vue3主推的pinia状态管理，你是不是觉得也和vuex一样，页面一刷新状态就丢？ 想要持久化还得sessionStorage，或者localStorage？ 引出今天的主角，pinia-plugin-persistedstate，就是这个依赖 他虽然不能让你上天入地，但却实打实的可以帮助你刷新页面也能保留之前的状态

废话有点多，直接上代码

npm i pinia-plugin-persistedstate 或者 yarn add pinia-plugin-persistedstate

安装完之后，先在main.ts || js文件中引入

// 引入资源包
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persistedstate'
// 调用依赖包
const pinia = createPinia()
pinia.use(piniaPluginPersist)

然后在你所需要的store文件中引入，我这里是index.ts

import { defineStore } from 'pinia'

const useThemeStore = defineStore('main', {
    state: () => {
        return {
            themeColorNum: 0,
        }
    },
    actions: {
        changeThemeColor(num:number) {
            this.themeColorNum = num
        }
    },
    // 当前文件 状态 全部持久化配置	也可以写persist: true
    persist: {
        enabled: true,
        strategies: [		// 详细字段限制
            {
                key: 'themeStore',		// 存储的key
                storage: localStorage,	// 存储方式localStorage或者sessionStorage
                paths: ['themeColorNum'] // 仅持久化 themeColorNum 状态
            }
        ]
    }
})

export { useThemeStore }

到这一步就可以正常使用了，但有些小伙伴配置完persist属性，整个文件的类型校验出错，稳住先别慌 赶紧在src文件下创建pinia.d.ts文件，并在里面填充下面代码：

// src/types/pinia.d.ts
import 'pinia';

declare module 'pinia' {
  interface DefineStoreOptionsBase<S, Store> {
    persist?: {};
  }
}

就可以正常使用了，收工，拜了个拜