pinia学习5：Plugins使用

Pinia 的插件系统允许开发者扩展其功能，增加自定义行为或集成其他库。通过插件，开发者可以添加全局钩子、自定义状态持久化机制、集成第三方服务等。

Pinia 插件介绍 

Pinia 的插件系统基于函数式编程，允许你通过插件来修改 Pinia 的内部行为。每个插件都是一个接受 Pinia 实例作为参数的函数，并可以添加钩子（hooks）来监听或修改状态的变化。

插件可以执行以下操作：

1. 添加全局钩子：在状态变更之前或之后执行自定义逻辑。
2. 扩展 store：添加自定义方法或属性到所有的 store 实例。
3. 集成外部服务：如使用外部 API 进行状态同步或持久化。

使用 Pinia 插件

创建一个插件文件，例如 logPlugin.ts：

// logPlugin.ts  
export default function logPlugin(pinia: any) {  
  pinia.$subscribe((mutation, state) => {  
    console.log('State changed:', mutation, state);  
  });  
}

在你的主应用程序文件或设置中，安装这个插件：

// main.ts 或 setup 脚本  
import { createPinia } from 'pinia';  
import logPlugin from './logPlugin';  
  
const pinia = createPinia();  
pinia.use(logPlugin);  
  
// 创建你的 Vue 应用实例并传递 pinia  
const app = createApp(App);  
app.use(pinia);  
app.mount('#app');

logPlugin 是一个简单的插件，它使用 $subscribe 方法来监听所有的状态变更，并在控制台打印出变更的信息。当你安装这个插件并将其应用到 Pinia 实例后，任何状态的变更都会触发这个插件的回调函数。

使用插件进行状态持久化

另一个常见的插件用例是实现状态的持久化。例如，你可能想要将用户的设置或偏好保存到本地存储中，以便在重新加载页面时恢复它们。以下是一个简化的示例，展示了如何使用插件实现状态持久化：

// persistPlugin.ts  
export default function persistPlugin(pinia: any, options: { key: string }) {  
  const { key } = options;  
    
  // 尝试从 localStorage 中加载状态  
  const savedState = localStorage.getItem(key);  
  if (savedState) {  
    pinia.state.value = JSON.parse(savedState);  
  }  
    
  // 监听状态变更并保存到 localStorage  
  pinia.$subscribe((mutation, state) => {  
    localStorage.setItem(key, JSON.stringify(state));  
  });  
}

在你的主应用程序中安装这个插件：

// main.ts 或 setup 脚本  
import { createPinia } from 'pinia';  
import persistPlugin from './persistPlugin';  
  
const pinia = createPinia();  
pinia.use(persistPlugin, { key: 'my-app-state' });  
  
// 创建你的 Vue 应用实例并传递 pinia  
const app = createApp(App);  
app.use(pinia);  
app.mount('#app');

persistPlugin 插件会在 Pinia 实例化时尝试从 localStorage 中加载状态，并在状态变更时将其保存回 localStorage。这样，即使页面被刷新或重新加载，状态也能被恢复。