uni-app 中 Pinia 的持久化方案：pinia-plugin-持久化

**前言** 

Pinia 作為 Vue3 應用的狀態管理解決方案，深受開發者的歡迎。在傳統的 Web 應用于瀏覽器環境下，Pinia 可以將狀態儲存再瀏覽器快取中。然而，在像 Uni-app 這樣的跨平臺應用程式中，瀏覽器快取無法滿足跨存檔場景下的數據管理需求。

**pinia-plugin-持久化** 

為了解決這一痛點，"pinia-plugin-持久化" 應運而生。該插件專門用於在 Uni-app 中實現 Pinia 狀態的持久化，使用戶可以在跨存檔場景下訪問和管理 Pinia 狀態。

**安裝** 

import { createPersist } from '@yaohui/pinia-plugin-持久化';

const store = createPersist(createPinia());

**使用** 

使用該插件後，Pinia 狀態將會自動儲存再 Uni-app 的儲存系統中。具體步驟如下：

1. 創建 Pinia 狀態實例：

import { createPersist } from '@yaohui/pinia-plugin-持久化';

const store = createPersist(createPinia());

2. 定義 Pinia 狀態：

import { defineStore } from 'pinia';

const useAppStore = defineStore('app', {
state() {
return {
count: 0,
};
},

getters: {
doubleCount() {
return this.count * 2;
},
},

actions: {
incrementCount() {
this.count++;
},
},
});

3. 獲取 Pinia 狀態：

const store = useAppStore();

console.log(store.count); // 輸出當前計數

**擴展** 

該插件提供了豐富的擴展點，允許開發者根據具體需求進行定制化。

1. 持久化過濾：

import { createPersist } from '@yaohui/pinia-plugin-持久化';

const store = createPersist(createPinia(), {
// 選擇性持久化部分狀態
filter({ key, storeValue }) {
return [key].some(i => storeValue[i] !== undefined);
},
});

2. 持久化轉換：

import { createPersist } from '@yaohui/pinia-plugin-持久化';

const store = createPersist(createPinia(), {
// 序列化狀態
serialize(storeValue) {
return JSON.parse(JSON.strigify(storeValue));
},
// 還原狀態
unserialize(storeValue) {
return JSON.parse(JSON.strigify(storeValue));
},
});

**示例應用** 

在我們的示例應運中，we 使用 "pinia-plugin-持久化" 持久化了一個計數器狀態。使用者可以點擊按鈕來遞增計數，此後計數將會自動儲存再 Uni-app 的儲存系統中，即使應運重新載入，計數也能夠正常恢復。

**結語** 

"pinia-plugin-持久化" 為開發者提供了在 Uni-app 中輕鬆實現 Pinia 狀態持久化的解決方案。該插件易於安裝和使用，並提供了豐富的擴展點，讓開發者可以根據實際需求進行定制化。

如果您有在 Uni-app 中使用 Pinia 的需求，那麼 "pinia-plugin-持久化" 將是您的不二之選。