1、pinia-plugin-persist 作用

????????pinia-plugin-persist是一個(gè)Pinia持久化存儲(chǔ)插件，用于將Pinia狀態(tài)存儲(chǔ)到本地持久化存儲(chǔ)中，例如localStorage或sessionStorage。

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

有時(shí)候需要把pinia中的數(shù)據(jù)持久化存儲(chǔ)（存到localstorage或sessionstorage中）

pinia-plugin-persist插件可以幫我們輕松的做到，安裝和使用pinia-plugin-persist可以按照以下步驟進(jìn)行：

首先，在你的項(xiàng)目中安裝pinia和pinia-plugin-persist?？梢允褂靡韵旅顏?lái)安裝：

npm install pinia pinia-plugin-persist

3、Setup??設(shè)置

在你的代碼中導(dǎo)入并使用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、基本用法

現(xiàn)在，你可以在你的應(yīng)用程序中使用pinia來(lái)管理狀態(tài)，并且pinia-plugin-persist會(huì)自動(dòng)將狀態(tài)持久化存儲(chǔ)。例如：

// 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, // 這個(gè)配置代表存儲(chǔ)生效，而且是整個(gè)store都存儲(chǔ)}
})

通過(guò)上述步驟，pinia-plugin-persist會(huì)自動(dòng)將useUserStore中的狀態(tài)持久化存儲(chǔ)。當(dāng)應(yīng)用重新加載時(shí)，狀態(tài)將會(huì)自動(dòng)恢復(fù)。

這就是使用pinia-plugin-persist插件進(jìn)行Pinia持久化存儲(chǔ)的基本步驟。當(dāng)然，根據(jù)你的項(xiàng)目需求，你還可以配置更多的選項(xiàng)來(lái)自定義插件的行為。你可以查閱pinia-plugin-persist的文檔了解更多信息。

?文檔地址：Basic usage | Pinia Plugin Persist