1616``` js
1717import { defineStore } from ' pinia'
1818
19- // 你可以任意命名 `defineStore()` 的返回值,但最好使用 store 的名字,同时以 `use` 开头且以 `Store` 结尾。
19+ // `defineStore()` 的返回值的命名是自由的
20+ // 但最好含有 store 的名字,且以 `use` 开头,以 `Store` 结尾。
2021// (比如 `useUserStore`,`useCartStore`,`useProductStore`)
2122// 第一个参数是你的应用中 Store 的唯一 ID。
2223export const useAlertsStore = defineStore (' alerts' , {
@@ -57,12 +58,13 @@ export const useCounterStore = defineStore('counter', {
5758``` js
5859export const useCounterStore = defineStore (' counter' , () => {
5960 const count = ref (0 )
61+ const name = ref (' Eduardo' )
6062 const doubleCount = computed (() => count .value * 2 )
6163 function increment () {
6264 count .value ++
6365 }
6466
65- return { count, doubleCount, increment }
67+ return { count, name, doubleCount, increment }
6668})
6769```
6870
@@ -111,7 +113,7 @@ export const useSearchFilters = defineStore('search-filters', () => {
111113``` vue
112114<script setup>
113115import { useCounterStore } from '@/stores/counter'
114- // 可以在组件中的任意位置访问 `store` 变量 ✨
116+ // 在组件内部的任何地方均可以访问变量 `store` ✨
115117const store = useCounterStore()
116118</script>
117119```
@@ -120,7 +122,7 @@ const store = useCounterStore()
120122如果你还不会使用 ` setup ` 组件,[ 你也可以通过** 映射辅助函数** 来使用 Pinia] ( ../cookbook/options-api.md ) 。
121123:::
122124
123- 你可以定义任意多的 store,但为了让使用 pinia 的益处最大化 (比如允许构建工具自动进行代码分割以及 TypeScript 推断),** 你应该在不同的文件中去定义 store** 。
125+ 你可以定义任意多的 store,但为了让使用 pinia 的益处最大化(比如允许构建工具自动进行代码分割以及 TypeScript 推断),** 你应该在不同的文件中去定义 store** 。
124126
125127一旦 store 被实例化,你可以直接访问在 store 的 ` state ` 、` getters ` 和 ` actions ` 中定义的任何属性。我们将在后续章节继续了解这些细节,目前自动补全将帮助你使用相关属性。
126128
@@ -132,16 +134,16 @@ import { useCounterStore } from '@/stores/counter'
132134import { computed } from 'vue'
133135
134136const store = useCounterStore()
135- // ❌ 这将不起作用,因为它破坏了响应性
136- // 这就和直接解构 `props` 一样
137+ // ❌ 下面这部分代码不会生效,因为它的响应式被破坏了
138+ // 它和解构 `props` 的操作是一样的
137139const { name, doubleCount } = store // [!code warning]
138- name // 将始终是 "Eduardo" // [!code warning]
139- doubleCount // 将始终是 0 // [!code warning]
140+ name // 将会一直是 "Eduardo" // [!code warning]
141+ doubleCount // 将会一直是 0 // [!code warning]
140142setTimeout(() => {
141143 store.increment()
142144}, 1000)
143- // ✅ 这样写是响应式的
144- // 💡 当然你也可以直接使用 `store.doubleCount`
145+ // ✅ 而这一部分代码就会维持响应式
146+ // 💡 在这里你也可以直接使用 `store.doubleCount`
145147const doubleValue = computed(() => store.doubleCount)
146148</script>
147149```
@@ -154,11 +156,11 @@ const doubleValue = computed(() => store.doubleCount)
154156<script setup>
155157import { storeToRefs } from 'pinia'
156158const store = useCounterStore()
157- // `name` 和 `doubleCount` 是响应式的 ref
158- // 同时通过插件添加的属性也会被提取为 ref
159- // 并且会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性
159+ // `name` 和 `doubleCount` 都是响应式引用
160+ // 下面的代码同样会提取那些来自插件的属性的响应式引用
161+ // 但是会跳过所有的 action 或者非响应式(非 ref 或者 非 reactive) 的属性
160162const { name, doubleCount } = storeToRefs(store)
161- // 作为 action 的 increment 可以直接解构
163+ // 名为 increment 的 action 可以被解构
162164const { increment } = store
163165</script>
164166```
0 commit comments