本文共 1124 字，大约阅读时间需要 3 分钟。

定义和使用 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，充分利用其强大的响应式特性。