# 定义Store

在进入核心概念之前,我们需要知道Store是使用defineStore()定义的,并且它需要一个唯一的名称,作为第一个参数传递:

import { defineStore } from 'pinia'

// useStore could be anything like useUser, useCart
// the first argument is a unique id of the store across your application
export const useStore = defineStore('main', {
  // other options...
})

这个名称(也称为id)是必需的,Pania使用它来将store连接到devtools。将返回的函数命名为use...是可组合项之间的约定,以使其用法符合使用习惯。

# 使用Store

我们定义了一个Store,因为只有在setup()中调用了useStore()store才会被创建:

import { useStore } from '@/stores/counter'

export default {
  setup() {
    const store = useStore()

    return {
      // you can return the whole store instance to use it in the template
      store,
    }
  },
}

您可以根据需要定义任意数量的store,并且应该在不同的文件中定义每个store以充分利用 Pinia(例如自动允许您的bundle进行代码拆分和TypeScript推理)。

如果您还没有使用setup组件,您仍然可以将Pinia与辅助函数一起使用 (opens new window)

一旦Store被实例化,您就可以直接在store上访问在stategettersactions中定义的任何属性。我们将在下一章中看到这些细节,自动补全功能也将帮助你。

请注意,Store是一个用reactive包装的对象,这意味着不需要在getter后面写 .value,但是,就像setup中的props一样,我们不能对它进行解构:

export default defineComponent({
  setup() {
    const store = useStore()
    // ❌ This won't work because it breaks reactivity
    // it's the same as destructuring from `props`
    const { name, doubleCount } = store

    name // "eduardo"
    doubleCount // 2

    return {
      // will always be "eduardo"
      name,
      // will always be 2
      doubleCount,
      // this one will be reactive
      doubleValue: computed(() => store.doubleCount),
      }
  },
})

为了从store中提取属性,同时保持其响应性,您需要使用storeToRefs()。它将为任何响应性属性创建引用。当您仅使用store中的state,且不调用任何操作时,这很有用:

import { storeToRefs } from 'pinia'

export default defineComponent({
  setup() {
    const store = useStore()
    // `name` and `doubleCount` are reactive refs
    // This will also create refs for properties added by plugins
    // but skip any action or non reactive (non ref/reactive) property
    const { name, doubleCount } = storeToRefs(store)

    return {
      name,
      doubleCount
    }
  },
})