Pinia 插件

Pinia 插件说明

Pinia store 支持扩展。您可以扩展的内容：

为 store 添加新的属性
定义 store 时增加新的选项
为 store 增加新的方法
包装现有的方法
改变甚至取消 action
实现其他功能，如本地存储
仅应用插件于特定 store

插件是通过 pinia.use() 添加到 pinia 实例的。最简单的例子是通过返回一个对象将一个静态属性添加到所有 store。

Pinia 插件是一个函数，可以选择性地返回要添加到 store 的属性。它接收一个可选参数，即 context。

context 上下文对象结构

context.pinia // 用 `createPinia()` 创建的 pinia。 
context.app // 用 `createApp()` 创建的当前应用(仅 Vue 3)。
context.store  // 该插件想扩展的 store。
context.options // 定义传给 `defineStore()` 的 store 的可选对象。

插件实现

1. 创建插件文件，如 /src/store/plugin.js

// { store } 来自 context 解构
export function myPiniaPlugin({store}) {
    // ...
    store.name = "i am plugin";
    // 添加公共方法
    store.method2 = (v)=>{
        store.gender = v;
    } 
}

2. 在 main.js 中使用插件函数或直接扩展

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { myPiniaPlugin } from '/src/store/plugin'
import './style.css'
import App from './App.vue'

// 初始化 pinia
const pinia = createPinia()
// 通过独立 js 函数扩展
pinia.use(myPiniaPlugin);
// 通过匿名函数扩展
pinia.use(({ store }) => {
    // 添加公共属性
    store.gender = '男';
    // 添加公共方法
    store.method1 = (v)=>{
        store.gender = v;
    } 
});

let app = createApp(App)
// 全局使用 pinia
app.use(pinia)
app.mount('#app')

3. 在其他页面组件中使用插件

<script setup>
import { storeToRefs, createPinia } from 'pinia'
import { useCounterStore } from '/src/store/store'
const store = useCounterStore()
const add = function(){
  store.count++;
}
const { count } = storeToRefs(store)
</script>
<template>
  <div>
    <div>数值 : {{ count }}</div>
    <div>数值 : {{ store.doubleCount }}</div>
    <div>插件 : {{ store.name  }}</div>
    <div>插件属性 : {{ store.gender  }}</div>
    <div>
      <button @click="add">+ 1</button>
      <button @click="store.method1('女')">更新 -> 女</button>
      <button @click="store.method2('男')">更新 -> 男</button>
    </div>
  </div>
</template>
<style scoped>
</style>

在插件中调用 $subscribe

你也可以在插件中使用 store.$subscribe 和 store.$onAction 。

pinia.use(({ store }) => {
  store.$subscribe(() => {
    // 响应 store 变化
  })
  store.$onAction(() => {
    // 响应 store actions
  })
})