Pinia持久化存储插件 pinia-plugin-persist

1、pinia-plugin-persist 作用

        pinia-plugin-persist是一个Pinia持久化存储插件，用于将Pinia状态存储到本地持久化存储中，例如localStorage或sessionStorage。

2、安装和使用pinia-plugin-persist

有时候需要把pinia中的数据持久化存储（存到localstorage或sessionstorage中）

pinia-plugin-persist插件可以帮我们轻松的做到，安装和使用pinia-plugin-persist可以按照以下步骤进行：

首先，在你的项目中安装pinia和pinia-plugin-persist。可以使用以下命令来安装：

npm install pinia pinia-plugin-persist

3、Setup  设置

在你的代码中导入并使用pinia-plugin-persist。在你的入口文件（例如main.js或app.js）中添加以下代码：

3.1 Vue2

import Vue from 'vue'
import vueCompositionApi from '@vue/composition-api'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'
import App from './App.vue'

const pinia = createPinia()
pinia.use(piniaPersist)

Vue.use(vueCompositionApi)
Vue.use(pinia)

new Vue({
  pinia,
  render: h => h(App),
}).$mount('#app')

3.2 Vue3

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'

const pinia = createPinia()
pinia.use(piniaPersist)

createApp({})
  .use(pinia)
  .mount('#app')

4、基本用法

现在，你可以在你的应用程序中使用pinia来管理状态，并且pinia-plugin-persist会自动将状态持久化存储。例如：

// store/use-user-store.ts
import { defineStore } from 'pinia'

export const useUserStore = defineStore('storeUser', {
  state: () => {
    return {
      firstName: 'S',
      lastName: 'L',
      accessToken: 'xxxxxxxxxxxxx'
    }
  },
  actions: {
    setToken (value: string) {
      this.accessToken = value
    }
  },
  persist: {
    enabled: true, // 这个配置代表存储生效，而且是整个store都存储
  }
})

通过上述步骤，pinia-plugin-persist会自动将useUserStore中的状态持久化存储。当应用重新加载时，状态将会自动恢复。

这就是使用pinia-plugin-persist插件进行Pinia持久化存储的基本步骤。当然，根据你的项目需求，你还可以配置更多的选项来自定义插件的行为。你可以查阅pinia-plugin-persist的文档了解更多信息。

 文档地址：Basic usage | Pinia Plugin Persist