pinia持久化插件(persistedstate)

本章默认你安装了pinia

1.先下载插件（persistedstate）

npm i pinia-plugin-persistedstate

2.main.ts/js中配置

import { createApp } from 'vue'
import { createPinia } from 'pinia'
//引入他
import { createPersistedState } from "pinia-plugin-persistedstate";
import App from './App.vue'
import router from './router'

const app = createApp(App)
const pinia = createPinia()
//使用他
pinia.use(createPersistedState())
app.use(pinia)

 3.在store中配置他

import { ref, computed } from 'vue'
import { defineStore, PiniaVuePlugin } from 'pinia'
import { parse, stringify } from 'zipson'//压缩插件在浏览器存储时使用 带一点加密的作用

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  ...
},
  {
    // persist: true //是否开启自动持久化存储,默认为localStore
    persist: [{
      storage: sessionStorage,
      key: 'piniatest',//存储时的键
      paths: ['count'],//可选择要存储state中的哪个
      serializer: {//定义怎么存储和怎么获取
        deserialize: parse,//取
        serialize: stringify,//存
      },
    }]
  }
)