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)
})
四、调用 和subscribe
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。
