Junie's Blog

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。官方文档：简介 | Pinia

核心概念

Store

Store 可以理解为一个承载着全局状态的组件，每个组件都可以读取和写入它。它是一个保存状态和业务逻辑的实体。

它有三个概念：state、getter 和 action，与 data、computed 和 methods 概念是相似的。

定义 Store

使用 defineStore 函数来定义一个 Store。它的第一个参数要求是一个独一无二的名字。

import { defineStore } from "pinia";
 
//  `defineStore()` 的返回值的命名是自由的
// 但最好含有 store 的名字，且以 `use` 开头，以 `Store` 结尾。
// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useAlertsStore = defineStore("alerts", {
  // 其他配置...
});

defineStore() 的第二个参数可接受两类值：Setup 函数或 Option 对象。

Option Store

export const useCounterStore = defineStore("counter", {
  state: () => ({ count: 0, name: "Eduardo" }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++;
    },
  },
});

可以认为 state 是 store 的数据 (data)，getters 是 store 的计算属性 (computed)，而 actions 则是方法 (methods)。

Setup Store

export const useCounterStore = defineStore("counter", () => {
  const count = ref(0);
  const name = ref("Eduardo");
  const doubleCount = computed(() => count.value * 2);
  function increment() {
    count.value++;
  }
 
  return { count, name, doubleCount, increment };
});

使用 Store

将 Store 实例化来使用。

<script setup>
import { useCounterStore } from '@/stores/counter'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
</script>

一旦 store 被实例化，你可以直接访问在 store 的 state、getters 和 actions 中定义的任何属性。

从 Store 解构

使用 useCounterStore() 函数来解构。

<script setup>
import { storeToRefs } from 'pinia'
const store = useCounterStore()
// `name` 和 `doubleCount` 都是响应式引用
// 下面的代码同样会提取那些来自插件的属性的响应式引用
// 但是会跳过所有的 action 或者非响应式（非 ref 或者 非 reactive）的属性
const { name, doubleCount } = storeToRefs(store)
// 名为 increment 的 action 可以被解构
const { increment } = store
</script>

Pinia 基础知识