From f47b06f0d302ef2dd734e6a3f4a16930f78f74b6 Mon Sep 17 00:00:00 2001 From: OMpZoNE <251580383@qq.com> Date: Tue, 3 Jun 2025 13:22:42 +0800 Subject: [PATCH] docs(zh): Updated core-concepts/index.md (#2042) Co-authored-by: Xavi Lee Co-authored-by: Kim Yang Co-authored-by: Eduardo San Martin Morote --- packages/docs/zh/core-concepts/index.md | 30 +++++++++++++------------ 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/packages/docs/zh/core-concepts/index.md b/packages/docs/zh/core-concepts/index.md index 5aa1519a..44fe57ba 100644 --- a/packages/docs/zh/core-concepts/index.md +++ b/packages/docs/zh/core-concepts/index.md @@ -16,7 +16,8 @@ ```js import { defineStore } from 'pinia' -// 你可以任意命名 `defineStore()` 的返回值,但最好使用 store 的名字,同时以 `use` 开头且以 `Store` 结尾。 +// `defineStore()` 的返回值的命名是自由的 +// 但最好含有 store 的名字,且以 `use` 开头,以 `Store` 结尾。 // (比如 `useUserStore`,`useCartStore`,`useProductStore`) // 第一个参数是你的应用中 Store 的唯一 ID。 export const useAlertsStore = defineStore('alerts', { @@ -57,12 +58,13 @@ export const useCounterStore = defineStore('counter', { ```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, doubleCount, increment } + return { count, name, doubleCount, increment } }) ``` @@ -111,7 +113,7 @@ export const useSearchFilters = defineStore('search-filters', () => { ```vue ``` @@ -120,7 +122,7 @@ const store = useCounterStore() 如果你还不会使用 `setup` 组件,[你也可以通过**映射辅助函数**来使用 Pinia](../cookbook/options-api.md)。 ::: -你可以定义任意多的 store,但为了让使用 pinia 的益处最大化 (比如允许构建工具自动进行代码分割以及 TypeScript 推断),**你应该在不同的文件中去定义 store**。 +你可以定义任意多的 store,但为了让使用 pinia 的益处最大化(比如允许构建工具自动进行代码分割以及 TypeScript 推断),**你应该在不同的文件中去定义 store**。 一旦 store 被实例化,你可以直接访问在 store 的 `state`、`getters` 和 `actions` 中定义的任何属性。我们将在后续章节继续了解这些细节,目前自动补全将帮助你使用相关属性。 @@ -132,16 +134,16 @@ import { useCounterStore } from '@/stores/counter' import { computed } from 'vue' const store = useCounterStore() -// ❌ 这将不起作用,因为它破坏了响应性 -// 这就和直接解构 `props` 一样 +// ❌ 下面这部分代码不会生效,因为它的响应式被破坏了 +// 它和解构 `props` 的操作是一样的 const { name, doubleCount } = store // [!code warning] -name // 将始终是 "Eduardo" // [!code warning] -doubleCount // 将始终是 0 // [!code warning] +name // 将会一直是 "Eduardo" // [!code warning] +doubleCount // 将会一直是 0 // [!code warning] setTimeout(() => { store.increment() }, 1000) -// ✅ 这样写是响应式的 -// 💡 当然你也可以直接使用 `store.doubleCount` +// ✅ 而这一部分代码就会维持响应式 +// 💡 在这里你也可以直接使用 `store.doubleCount` const doubleValue = computed(() => store.doubleCount) ``` @@ -154,11 +156,11 @@ const doubleValue = computed(() => store.doubleCount) ``` -- 2.47.3