6. Pinia：Pinia 插件开发

Pinia 插件允许我们扩展 Pinia 的功能，可以添加自定义的行为或修改已有的行为。插件通常用于添加共享的逻辑、全局状态处理或集成第三方库。

插件的基本原理

1. 安装插件: 使用 pinia.use() 方法安装插件。
2. 扩展功能: 插件可以通过返回一个对象来扩展 store 的属性或方法。
3. 生命周期钩子: 插件可以利用 onAction、onPatch 等钩子来监听 store 的行为。

开发过程

创建一个简单的 Pinia 插件

首先，我们创建一个简单的日志插件，它会记录每个 store 的操作：

// plugins/logger.js
export function loggerPlugin({
    
     store }) {
   
   
  store.$onAction(({
    
     name, args, after, onError }) => {
   
   
    console.log(`Action "${
     
     name}" with args:`, args);
    after((result) => {
   
   
      console.log(`Action "${
     
     name}" result:`, result);
    });
    onError((error) => {
   
   
      console.error(`Action "${
     
     name}" failed:`, error);
    });
  });
}

安装插件

在 Vue 应用中使用这个插件：

// main.js
import {
   
    createApp } from 'vue';
import {
   
    createPinia } from 'pinia';
import App from './App.vue';
import {