Appearance
定义 Store
Store 是由defineStore()定义的,它的第一个参数要求是一个唯一的名字
js
import { defineStore } from 'pinia'
// `defineStore()` 的返回值的命名是自由的
// 但最好含有 store 的名字，且以 `use` 开头，以 `Store` 结尾。
// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useAlertsStore = defineStore('alerts', {
// 其他配置...
})这个名字也被用作id, Pinia 将用它来连接store和devtools。为了养成习惯的用法,我们建议使用use前缀和Store后缀。
defineStore()的第二个参数可以接受两类值: Setup 函数或 Option 对象
## Option Store
与 Vue 的选项式 API 类似，我们也可以传入一个带有 state、actions 与 getters 属性的 Option 对象
js
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
与 Vue 组合式 API 的 setup 函数 相似，我们可以传入一个函数，该函数定义了一些响应式属性和方法，并且返回一个带有我们想暴露出去的属性和方法的对象。
js
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 }
})在 Setup Store 中：
ref()就是state属性computed()就是gettersfunction()就是actions
注意，要让 pinia 正确识别 state，你必须在 setup store 中返回 state 的所有属性。这意味着，你不能在 store 中使用私有属性。不完整返回会影响 SSR ，开发工具和其他插件的正常运行。
Setup store 比 Option Store 带来了更多的灵活性，因为你可以在一个 store 内创建侦听器，并自由地使用任何组合式函数。不过，请记住，使用组合式函数会让 SSR 变得更加复杂
Setup store 也可以依赖于全局提供的属性，比如路由。任何应用层面提供的属性都可以在 store 中使用 inject() 访问，就像在组件中一样：
js
import { inject } from 'vue'
import { useRoute } from 'vue-router'
import { defineStore } from 'pinia'
export const useSearchFilters = defineStore('search-filters', () => {
const route = useRoute()
// 这里假定 `app.provide('appProvided', 'value')` 已经调用过
const appProvided = inject('appProvided')
// ...
return {
// ...
}
})警告
不要返回上例中route和appProvided之类的属性,因为他们不属于store,而且可以在组件中直接获取这些数据
使用 Store
虽然我们前面定义了一个 store，但在我们使用 <script setup> 调用 useStore()(或者使用 setup() 函数，像所有的组件那样) 之前，store 实例是不会被创建的：
vue
<script setup>
import { useCounterStore } from '@/stores/counter'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
</script>为了让使用 pinia 的益处最大化(比如允许构建工具自动进行代码分割以及 TypeScript 推断)，应该在不同的文件中去定义 store
一旦 store 被实例化，你可以直接访问在 store 的 state、getters 和 actions 中定义的任何属性。
请注意，store 是一个用 reactive 包装的对象，这意味着不需要在 getters 后面写 .value。就像 setup 中的 props 一样，我们不能对它进行解构：
vue
<script setup>
import { useCounterStore } from '@/stores/counter'
import { computed } from 'vue'
const store = useCounterStore()
// ❌ 下面这部分代码不会生效，因为它的响应式被破坏了
// 与 reactive 相同: https://vuejs.org/guide/essentials/reactivity-fundamentals.html#limitations-of-reactive
const { name, doubleCount } = store
name // 将会一直是 "Eduardo" //
doubleCount // 将会一直是 0 //
setTimeout(() => {
store.increment()
}, 1000)
// ✅ 而这一部分代码就会维持响应式
// 💡 在这里你也可以直接使用 `store.doubleCount`
const doubleValue = computed(() => store.doubleCount)
</script>从 Store 解构
为了从 store 中提取属性时保持其响应性，你需要使用 storeToRefs()。它将为每一个响应式属性创建引用。当你只使用 store 的状态而不调用任何 action 时，它会非常有用。请注意，你可以直接从 store 中解构 action，因为它们也被绑定到 store 上：
vue
<template>
<div class="user card">
<p>姓名: {{ name }}</p>
<p>年龄: {{ age }}</p>
<p>性别: {{ sex }}</p>
<p>地址: {{ address }}</p>
<el-button type="primary" @click="updateUserAge">更新年龄</el-button>
</div>
</template>
<script setup>
import { useUserStore } from './stores/user.js'
import { storeToRefs } from 'pinia'
import { toRefs } from 'vue'
const store = useUserStore()
const { user } = storeToRefs(store)
const { name, age, sex, address } = toRefs(user.value)
const { updateUserAge } = store
</script>或者简化一下代码:
vue
<template>
<div class="user card">
<p>姓名: {{ user.name }}</p>
<p>年龄: {{ user.age }}</p>
<p>性别: {{ user.sex }}</p>
<p>地址: {{ user.address }}</p>
<el-button type="primary" @click="updateUserAge">更新年龄</el-button>
</div>
</template>
<script setup>
import { useUserStore } from './stores/user.js'
import { storeToRefs } from 'pinia'
const store = useUserStore()
const { user } = storeToRefs(store)
const { updateUserAge } = store
</script>