定义和使用 Pinia Store

在深入理解 Pinia 核心概念之前，我们需要了解 Store 是如何定义的。Store 是通过 defineStore() 方法来创建的，并且它需要一个唯一的名称作为第一个参数传递。

定义 Store

首先，导入 defineStore 方法：

import { defineStore } from 'pinia'

name 参数是必需的，Pinia 使用它将 Store 连接到开发工具中。返回的函数可以命名为 use...，这是一个跨组件间的约定，以符合你的使用习惯。

export const useStore = defineStore('main', {
  // 其他选项...
})

在 setup() 组件中调用 useStore() 之前，不会创建 Store 实例。例如：

import { useStore } from '@/stores/counter'
export default {
  setup() {
    const store = useStore()
    return {
      store,
    }
  },
}

你可以定义任意数量的 Store，并且建议在不同的文件中定义每个 Store，以充分利用 Pinia 的优势（如代码拆分和 TypeScript 推理）。

使用 Store

Store 实例是一个带有反应性封装的对象，不需要 .value 后缀，但不能像解构 props 那样解构。直接在 Store 上访问状态、计算属性和动作属性即可。

export default defineComponent({
  setup() {
    const store = useStore()
    // ❌ 不起作用，破坏响应式
    // const { name, doubleCount } = store
    // return { name, doubleCount }
    // 使用 storeToRefs 创建响应式引用
    const { name, doubleCount } = storeToRefs(store)
    return { name, doubleCount }
  },
})

注意事项

Store 是一个反应性对象，不需要 .value。

避免在 setup() 中解构 Store，使用 storeToRefs 创建响应式引用。

不同的 Store 应该在不同的文件中定义，以便于代码拆分和 TypeScript 推理。

通过以上方法，你可以轻松地使用和管理 Pinia Store，充分利用其强大的响应式特性。

转载地址：http://gqtfk.baihongyu.com/

你可能感兴趣的文章