随笔- 542 文章- 6 评论- 27 阅读- 29万

vuejs3.0 从入门到精通——Pinia——定义Store

定义Store

Store 是用defineStore()定义的，它的第一个参数要求是一个独一无二的名字：

import { defineStore } from 'pinia'
 
// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useAlertsStore = defineStore('alerts', {
  // 其他配置...
})

这个名字，也被用作id，是必须传入的， Pinia 将用它来连接 store 和 devtools。为了养成习惯性的用法，将返回的函数命名为use...是一个符合组合式函数风格的约定。

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

一、Option Store

https://pinia.vuejs.org/zh/core-concepts/#option-stores

与 Vue 的选项式 API 类似，我们也可以传入一个带有state、actions与getters属性的Option对象

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

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

二、Setup Store

https://pinia.vuejs.org/zh/core-concepts/#setup-stores

也存在另一种定义 store 的可用语法。与 Vue 组合式 API 的setup函数相似，我们可以传入一个函数，该函数定义了一些响应式属性和方法，并且返回一个带有我们想暴露出去的属性和方法的对象。

//export const useCounterStore：这是export一个名为 useCounterStore 的函数，这个函数将用于创建和访问 store。
//defineStore('counter', () => {...})：这是 defineStore 函数的调用，它接受两个参数：一个字符串标识符 'counter' 和一个设置函数（setup function）。这个设置函数定义了这个 store 的内部状态和行为。
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)//使用 ref 函数创建一个响应式引用（reactive reference）count，并初始化为 0。ref 是 Vue.js 组合式 API 的一部分，它用于创建响应式值。
  //定义了一个名为 increment 的函数，这个函数会增加 count 的值。注意我们是通过 count.value 而不是直接 count 来访问和修改 count 的，因为 count 是一个响应式引用。
  function increment() { 
    count.value++
  }
  //这个设置函数返回了一个对象，这个对象包含了 count 和 increment。这样做使得 count 和 increment 成为了这个 store 的公共 API，也就是说，我们可以通过这个 store 访问和修改 count，以及调用 increment 函数。
  return { count, increment }
})

在Setup Store中：

- ref()就是state属性
- computed()就是getters
- function()就是actions

Setup store比Option Store带来了更多的灵活性，因为你可以在一个store内创建侦听器，并自由地使用任何组合式函数。不过，请记住，使用组合式函数会让SSR变得更加复杂。

三、使用 store

虽然我们前面定义了一个 store，但在我们使用 <script setup> 调用 useStore()(或者使用 setup() 函数，像所有的组件那样) 之前，store 实例是不会被创建的：

<script setup>
import { useCounterStore } from '@/stores/counter'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
</script>

你可以定义任意多的 store，但为了让使用 pinia 的益处最大化(比如允许构建工具自动进行代码分割以及 TypeScript 推断)，你应该在不同的文件中去定义 store。

如果你还不会使用 setup 组件，你也可以通过映射辅助函数来使用 Pinia。

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

请注意，store 是一个用 reactive 包装的对象，这意味着不需要在 getters 后面写 .value，就像 setup 中的 props 一样，如果你写了，我们也不能解构它：

<script setup>
const store = useCounterStore()
// ❌ 这将不起作用，因为它破坏了响应性
// 这就和直接解构 `props` 一样
const { name, doubleCount } = store 
name // 将始终是 "Eduardo" 
doubleCount // 将始终是 0 
setTimeout(() => {
  store.increment()
}, 1000)
// ✅ 这样写是响应式的
// 💡 当然你也可以直接使用 `store.doubleCount`
const doubleValue = computed(() => store.doubleCount)
</script>　

为了从 store 中提取属性时保持其响应性，你需要使用 storeToRefs()。它将为每一个响应式属性创建引用。当你只使用 store 的状态而不调用任何 action 时，它会非常有用。请注意，你可以直接从 store 中解构 action，因为它们也被绑定到 store 上：

<script setup>
import { storeToRefs } from 'pinia'
const store = useCounterStore()
// `name` 和 `doubleCount` 是响应式的 ref
// 同时通过插件添加的属性也会被提取为 ref
// 并且会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性
const { name, doubleCount } = storeToRefs(store)
// 作为 action 的 increment 可以直接解构
const { increment } = store
</script>