diff --git a/packages/docs/zh/core-concepts/index.md b/packages/docs/zh/core-concepts/index.md index 344fd4c729..841c118d71 100644 --- a/packages/docs/zh/core-concepts/index.md +++ b/packages/docs/zh/core-concepts/index.md @@ -10,7 +10,9 @@ ```js import { defineStore } from 'pinia' -// 你可以对 `defineStore()` 的返回值进行任意命名,但最好使用 store 的名字,同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`,`useCartStore`,`useProductStore`) +// `defineStore()` 的返回值的命名是自由的 +// 但最好含有 store 的名字,且以 `use` 开头,以 `Store` 结尾。 +// (比如 `useUserStore`,`useCartStore`,`useProductStore`) // 第一个参数是你的应用中 Store 的唯一 ID。 export const useAlertsStore = defineStore('alerts', { // 其他配置... @@ -27,9 +29,9 @@ export const useAlertsStore = defineStore('alerts', { ```js {2-10} export const useCounterStore = defineStore('counter', { - state: () => ({ count: 0 }), + state: () => ({ count: 0, name: 'Eduardo' }), getters: { - double: (state) => state.count * 2, + doubleCount: (state) => state.count * 2, }, actions: { increment() { @@ -50,11 +52,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, increment } + return { count, name, doubleCount, increment } }) ``` @@ -77,14 +81,16 @@ Setup store 比 [Option Store](#option-stores) 带来了更多的灵活性,因 ```vue ``` -你可以定义任意多的 store,但为了让使用 pinia 的益处最大化(比如允许构建工具自动进行代码分割以及 TypeScript 推断),**你应该在不同的文件中去定义 store**。 - +:::tip 如果你还不会使用 `setup` 组件,[你也可以通过**映射辅助函数**来使用 Pinia](../cookbook/options-api.md)。 +::: + +你可以定义任意多的 store,但为了让使用 pinia 的益处最大化(比如允许构建工具自动进行代码分割以及 TypeScript 推断),**你应该在不同的文件中去定义 store**。 一旦 store 被实例化,你可以直接访问在 store 的 `state`、`getters` 和 `actions` 中定义的任何属性。我们将在后续章节继续了解这些细节,目前自动补全将帮助你使用相关属性。 @@ -93,16 +99,16 @@ const store = useCounterStore() ```vue ``` @@ -113,11 +119,11 @@ const doubleValue = computed(() => store.doubleCount) ```