小白了解Pinia第2集 · 三大核心状态Getters、Actions以及Plugins 插件-编程知识

小白了解Pinia第2集 · 三大核心状态Getters、Actions以及Plugins 插件

三大核心状态

state

第1集有详细讲解：https://blog.csdn.net/qq_51463650/article/details/137137080?spm=1001.2014.3001.5501

getters

Getter 完全等同于 Store 状态的 计算值。它们可以用 defineStore() 中的 getters 属性定义。他们接收“状态”作为第一个参数以鼓励箭头函数的使用：

export const useCounterStore = defineStore('counter', {state: () => ({count: 0,}),getters: {doubleCount: (state) => state.count * 2,},
})

大多数时候，getter 只会依赖状态，但是，他们可能需要使用其他 getter。正因为如此，我们可以在定义常规函数时通过 this 访问到_whole store instance_ 但是需要定义返回类型的类型（在 TypeScript 中）。这是由于 TypeScript 中的一个已知限制，并且不会影响使用箭头函数定义的 getter，也不会影响不使用 this 的 getter：

export const useCounterStore = defineStore('counter', {state: () => ({count: 0,}),getters: {// 自动将返回类型推断为数字doubleCount(state) {return state.count * 2},// 返回类型 **必须** 明确设置doublePlusOne(): number {// 整个商店的自动完成和填写return this.doubleCount + 1},},
})

然后你可以直接在 store 实例上访问 getter：

<template><p>Double count is {{ store.doubleCount }}</p>
</template><script>
export default {setup() {const store = useCounterStore()return { store }},
}
</script>

actions

Actions 相当于组件中的 methods。它们可以使用 defineStore（） 中的 actions 属性定义，并且它们非常适合定义业务逻辑：

项目中有一个简单的存入与销毁的方法，看下图;
在这里插入图片描述
与 getters 一样，操作可以通过 this 访问 whole store instance 并提供完整类型（和自动完成）支持。与 getter 不同，actions 可以是异步的，您可以在任何 API 调用甚至其他操作的操作中await！

这是使用 Mande 的示例。请注意，只要您获得“Promise”，您使用的库并不重要，您甚至可以使用本机的“fetch”函数（仅限浏览器）：

import { mande } from 'mande'const api = mande('/api/users')export const useUsers = defineStore('users', {state: () => ({userData: null,// ...}),actions: {async registerUser(login, password) {try {this.userData = await api.post({ login, password })showTooltip(`Welcome back ${this.userData.name}!`)} catch (error) {showTooltip(error)// 让表单组件显示错误return error}},},
})

在这里插入图片描述

Plugins 插件

在这里插入图片描述

Pinia 插件是一个函数，可以选择返回要添加到商店的属性。它需要一个可选参数，一个 context：

export function myPiniaPlugin(context) {context.pinia // 使用 `createPinia()` 创建的 piniacontext.app // 使用 `createApp()` 创建的当前应用程序（仅限 Vue 3）context.store // 插件正在扩充的商店context.options // 定义存储的选项对象传递给`defineStore()`// ...
}