pinia持久化persist

Pinia 是一个 Vue 3 的状态管理库，它提供了一个插件 pinia-plugin-persist 来实现数据的持久化存储。pinia-plugin-persist 可以将 Pinia 的状态存储在浏览器的 localStorage 或者 sessionStorage 中，以便在刷新页面或者重新打开浏览器时仍然可以保留状态。

以下是使用 pinia-plugin-persist 实现数据持久化的示例代码：

1. 安装 pinia 和 pinia-plugin-persist：

npm install pinia pinia-plugin-persist

2. 在 main.js 中引入 pinia 和 pinia-plugin-persist，并注册插件：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createPersist } from 'pinia-plugin-persist'
import App from './App.vue'

const pinia = createPinia()
pinia.use(createPersist({
  // 配置项
}))

createApp(App).use(pinia).mount('#app')

3. 在插件的配置项中指定要存储的状态：

pinia.use(createPersist({
  // 配置项
  /** 要存储的状态 */
  state: {
    /** 要存储的状态名 */
    myState: {
      /** 存储在 localStorage 中的键名 */
      key: 'myState',
      /** 存储在 sessionStorage 中的键名 */
      sessionKey: 'myStateSession',
      /** 是否启用 sessionStorage */
      session: false,
      /** 是否启用深度监听 */
      deep: true,
      /** 是否启用异步存储 */
      async: false,
      /** 存储前的转换函数 */
      beforePersist: (state) => state,
      /** 恢复后的转换函数 */
      afterRestore: (state) => state,
    },
  },
}))

4. 在组件中使用 Pinia 的状态：

import { defineComponent } from 'vue'
import { useStore } from 'pinia'

export default defineComponent({
  setup() {
    const store = useStore()

    // 读取状态
    const myState = store.myState

    // 修改状态
    store.myState = 'new value'
  },
})