小白了解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()` 创建的 pinia
  context.app // 使用 `createApp()` 创建的当前应用程序（仅限 Vue 3）
  context.store // 插件正在扩充的商店
  context.options // 定义存储的选项对象传递给`defineStore()`
  // ...
}