Plugins

插件意思，用来扩展pinia的能力

由于是底层 API，Pania Store可以完全扩展。以下是您可以执行的操作列表：

向 Store 添加新属性
定义 Store 时添加新选项
为 Store 添加新方法
包装现有方法
更改甚至取消操作
实现本地存储等副作用
仅适用于特定 Store

一、向 Store 添加新属性

通常，为store添加属性时候，都是每个store添加各自的属性。如果想要为所有store添加相同的对象属性，那就不太方便，所以pinia提供了plugins，它能够做到。这对于添加全局对象（如路由器、模式或 toast 管理器）很有用。

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

import { userPlugins } from './store/plugins'
const pinia = createPinia();
pinia.use(userPlugins)

createApp(App)
.use(pinia)
.mount('#app')

注意⚠️：插件仅适用于在将pinia传递给应用程序后创建的 store ，否则将不会被应用。所以上面代码piniaPlugins顺序为什么在上面，是因为我的store在App.vue一开始就用了。如果App没有用直接放到最下面也可以的

只有 user 和 register 两个 store 被插件使用了, 每个 store 上都会有 plugin 返回的参数.

// /src/store/plugins.ts
export const userPlugins = () => {
    return {
        userName: 'pinia'
    }
}

// src/App.vue
<script setup>
import { userStore, useRegtores } from "@/store";
const user = userStore();
const reg = useRegtores();
</script>

<template>
   <div>userStore中用户名称为：{{ user.userName }}</div>
   <div>useRegtores中用户名称为：{{ reg.userName }}</div>
</template>

<style scoped>
</style>

当然我们也可以下面这样添加属性。但是在devTools中无法跟踪它。所以如果可以，请使用返回版本，以便 devtools 可以自动跟踪它们：

export const userPlugins = ({ store }) => {
    store.userName = "pinia";
}

这里默认是无法在devTools里面跟踪的。但是为了让userName在devtools中可见，如果你想调试它，请确保将它添加到store._customProperties仅在开发模式开发工具：

// 从上面的例子
pinia.use(({ store }) => {
  store.userName = 'pinia'
  // 确保您的打包器可以处理这个问题。 webpack 和 vite 应该默认这样做
  if (process.env.NODE_ENV === 'development') {
    // 添加您在 store 中设置的任何 keys
    store._customProperties.add('userName')
  }
})

二、给store添加新的state

如果你想给store添加state属性，有两种方式：

1、store.[属性名]（不可以在 devtools 中使用）

2、store.$state（可以在 devtools 中使用，并且在 SSR 期间被序列化）

下面看第二种

import { ref, toRef } from 'vue';
export const userPlugins = ({ store }) => {
    if(!store.$state.hasOwnProperty('hasError')){
        const hasError = ref(false);
        store.$state.hasError = hasError;
    }
    store.hasError = toRef(store.$state,'hasError')
}

1️⃣ 首先, 为了正确处理 SSR, 需要确保不覆盖任何已存在的值. 因此先判断是否存在 hasError

2️⃣ 如果不存在, 那么使用 ref 定义. 这样每个 store 都会有自己独立的 hasError

3️⃣ 其次, 如果已经存在 hasError, 我们需要将 hasError 从 state 转移到 store, 这样既可以通过 store.hasError 访问, 也可以通过 store.$state.hasError 访问.

📕这种情况下, 最后不要在 return 时返回 hasError 了. 因为返回值会被展示在开发者工具中的 state 部分, 又定义又返回就会展示两次了.

📕在 plugin 中的增加 state 或修改 state, 都不触发任何的订阅, 因为这时 store 并不活跃

三、添加新的外部属性

当添加外部属性、来自其他库的类实例或仅仅是非响应式的东西时，您应该在将对象传递给 pinia 之前使用 markRaw() 包装对象。这是一个将路由添加到每个 store 的示例：

import { markRaw } from 'vue'
// 根据您的路由所在的位置进行调整
import { router } from './router'

pinia.use(({ store }) => {
  store.router = markRaw(router)
})

pinia.use(({ store }) => {
  store.$subscribe(() => {
    // 在存储变化的时候执行
  })
  store.$onAction(() => {
    // 在 action 的时候执行
  })
})

五、TypeScript

上面显示的所有内容都可以通过键入支持来完成，因此您无需使用 any 或 @ts-ignore。

1、Typing 插件

Pinia 插件可以按如下方式引入：

import { ref, toRef } from "vue";
import { PiniaPluginContext } from "pinia";

export const userPlugins = ({ store }: PiniaPluginContext) => {
  if (!store.$state.hasOwnProperty("hasError")) {
    const hasError = ref(false);
    store.$state.hasError = hasError;
  }
  store.hasError = toRef(store.$state, "hasError");
};

2、引入新的 store 属性

向 store 添加新属性时，您还应该扩展 PiniaCustomProperties 接口。

import 'pinia'
declare module 'pinia' {
  export interface PiniaCustomProperties {
    // 通过使用 setter，我们可以同时允许字符串和引用
    set hello(value: string | Ref<string>)
    get hello(): string

    // 你也可以定义更简单的值
    simpleNumber: number
  }
}

然后可以安全地写入和读取它：

pinia.use(({ store }) => {
  store.hello = 'Hola'
  store.hello = ref('Hola')

  store.number = Math.random()
  // @ts-expect-error: we haven't typed this correctly
  store.number = ref(Math.random())
})

我们可以使用 4 种通用类型的 PiniaCustomProperties 来正确输入：

import 'pinia'

declare module 'pinia' {
  export interface PiniaCustomProperties<Id, S, G, A> {
    $options: {
      id: Id
      state?: () => S
      getters?: G
      actions?: A
    }
  }
}

提示在泛型中扩展类型时，它们的命名必须与源代码中的完全相同。 Id不能命名为id或I，S不能命名为State。以下是每个字母所代表的含义：

S: State
G: Getters
A: Actions
SS: Setup Store / Store

关于pinia的基础知识就这里完结了，下一节将在项目中实际使用、总结pinia。

Plugins ​

一、向 Store 添加新属性 ​

二、给store添加新的state ​

三、添加新的外部属性 ​

四、调用 $onAction 和 $subscribe ​

五、TypeScript ​

1、Typing 插件 ​

2、引入新的 store 属性 ​