摘要

Pinia 的插件機制允許我們擴展其核心功能，例如將狀態持久化到 localStorage、添加自訂的狀態監聽器等。

定義與說明

一個 Pinia 插件就是一個函式，它會接收到一個包含 store 實例的「上下文」物件。我們可以在這個函式中，透過 store.$subscribe 來監聽狀態變化，或直接在 store 上添加新的屬性。

實作範例

一個將狀態自動保存到 localStorage 的簡單插件。

plugins/pinia-persistence.js

// plugins/pinia-persistence.js
export function persistencePlugin({ store }) {
  const savedState = JSON.parse(localStorage.getItem(store.$id));
  if (savedState) {
    store.$patch(savedState);
  }
  store.$subscribe((mutation, state) => {
    localStorage.setItem(store.$id, JSON.stringify(state));
  });
}

main.js

// main.js
import { createPinia } from 'pinia';
const pinia = createPinia();
pinia.use(persistencePlugin);
app.use(pinia);

結論

插件為 Pinia 提供了極高的擴展性，讓我們可以輕鬆地將通用功能（如持久化、日誌記錄）與核心業務邏輯分離，並在多個 Store 之間共享。

Pinia 插件持久化擴展性