定义Store
Store 是用 defineStore() 定义的
defineStore(id, options|storeSetup)
它的第一个参数要求是一个独一无二的名字
它的第二个参数可接受两类值：Setup 函数或 Option 对象。
定义Store
1import {defineStore} from "pinia";
2import {ref, computed} from "vue";
3
4// 与 Vue 组合式 API 的 setup 函数 相似
5// 我们可以传入一个函数，该函数定义了一些响应式属性和方法，并且返回一个带有我们想暴露出去的属性和方法的对象。
6export const useCounterStore = defineStore('counter', () => {
7
8 // ref() 就是 state 属性
9 const count = ref(0)
10
11 // computed() 就是 getters
12 const doubleCount = computed(() => count.value * 2)
13
14 // function() 就是 actions
15 function increment() {
16 count.value++
17 }
18
19 return {count, doubleCount, increment}
20})
1import {defineStore} from "pinia";
2
3// 与 Vue 的选项式 API 类似
4// 我们也可以传入一个带有 state、actions 与 getters 属性的 Option 对象
5export const useCounterStore = defineStore('counter', {
6
7 // store 的数据 (data)
8 state: () => ({count: 0}),
9
10 // store 的计算属性 (computed)
11 getters: {
12 double: (state) => state.count * 2,
13 },
14
15 // store 的方法 (methods)
16 actions: {
17 increment() {
18 this.count++
19 },
20 },
21})
:::
使用Store
一旦 store 被实例化，你可以直接访问在 store 的 state、getters 和 actions 中定义的任何属性。
store 是一个用 reactive 包装的对象，这意味着不需要在 getters 后面写 .value
1<template>
2 <p>{{ store.count }} * 2 = {{ store.double }}</p>
3 <button @click="add">加</button>
4</template>
5
6<script lang="ts" name="App" setup>
7import {useCounterStore} from '@/stores/counter'
8
9const store = useCounterStore()
10
11function add() {
12 store.increment() // action
13 console.log(store.count) // state
14 console.log(store.double) // getter
15}
16</script>
state 和 getters 不能直接从 store 中解构，为了从 store 中提取属性时保持其响应性，你需要使用 storeToRefs()，它将为每一个响应式属性创建引用。
1<template>
2 <p>{{ count }} * 2 = {{ double }}</p>
3 <button @click="add">加</button>
4</template>
5
6<script lang="ts" name="App" setup>
7import {storeToRefs} from 'pinia'
8import {useCounterStore} from '@/stores/counter'
9
10const store = useCounterStore()
11const {count, double} = storeToRefs(store)
12const {increment} = store
13
14function add() {
15 increment()
16 console.log(count.value)
17 console.log(double.value)
18}
19</script>
