From 86c25ed26a4a5540faf086e184f154901fa2b981 Mon Sep 17 00:00:00 2001 From: Prain Lopez <61592725+PrainLopez@users.noreply.github.com> Date: Mon, 4 Mar 2024 23:49:26 +0800 Subject: [PATCH] docs(zh,en): Update translation of core-concepts/index, move SSR link forward to new mention (#2530) * Update translation of index.md * move SSR link forward * fix warning box * typeset fix line-68 Co-authored-by: Xavi Lee * typeset fix line-92 Co-authored-by: Xavi Lee * typeset fix @line-72 Co-authored-by: Xavi Lee * typeset fix @line-115 Co-authored-by: Xavi Lee --------- Co-authored-by: Xavi Lee --- packages/docs/core-concepts/index.md | 4 +-- packages/docs/zh/core-concepts/index.md | 36 ++++++++++++++++++++++--- 2 files changed, 34 insertions(+), 6 deletions(-) diff --git a/packages/docs/core-concepts/index.md b/packages/docs/core-concepts/index.md index 981a1cc595..d443e8c35c 100644 --- a/packages/docs/core-concepts/index.md +++ b/packages/docs/core-concepts/index.md @@ -68,9 +68,9 @@ In _Setup Stores_: - `computed()`s become `getters` - `function()`s become `actions` -Note you **must** return **all state properties** in setup stores for pinia to pick them up as state. In other words, you cannot have _private_ state properties in stores. Not returning all state properties can break SSR, devtools, and other plugins. +Note you **must** return **all state properties** in setup stores for pinia to pick them up as state. In other words, you cannot have _private_ state properties in stores. Not returning all state properties can break [SSR](../cookbook/composables.md), devtools, and other plugins. -Setup stores bring a lot more flexibility than [Option Stores](#Option-Stores) as you can create watchers within a store and freely use any [composable](https://vuejs.org/guide/reusability/composables.html#composables). However, keep in mind that using composables will get more complex when using [SSR](../cookbook/composables.md). +Setup stores bring a lot more flexibility than [Option Stores](#option-stores) as you can create watchers within a store and freely use any [composable](https://vuejs.org/guide/reusability/composables.html#composables). However, keep in mind that using composables will get more complex when using SSR. Setup stores are also able to rely on globally _provided_ properties like the Router or the Route. Any property [provided at the App level](https://vuejs.org/api/application.html#app-provide) can be accessed from the store using `inject()`, just like in components: diff --git a/packages/docs/zh/core-concepts/index.md b/packages/docs/zh/core-concepts/index.md index 11b2e110f0..33045a32b3 100644 --- a/packages/docs/zh/core-concepts/index.md +++ b/packages/docs/zh/core-concepts/index.md @@ -10,7 +10,8 @@ ```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', { // 其他配置... @@ -65,7 +66,32 @@ export const useCounterStore = defineStore('counter', () => { - `computed()` 就是 `getters` - `function()` 就是 `actions` -Setup store 比 [Option Store](#option-stores) 带来了更多的灵活性，因为你可以在一个 store 内创建侦听器，并自由地使用任何[组合式函数](https://cn.vuejs.org/guide/reusability/composables.html#composables)。不过，请记住，使用组合式函数会让 [SSR](../cookbook/composables.md) 变得更加复杂。 +注意，要让 pinia 正确识别 `state`，你**必须**在 setup store 中返回 **`state` 的所有属性**。这意味着，你不能在 store 中使用**私有**属性。不完整返回会影响 [SSR](../cookbook/composables.md) ，开发工具和其他插件的正常运行。 + +Setup store 比 [Option Store](#option-stores) 带来了更多的灵活性，因为你可以在一个 store 内创建侦听器，并自由地使用任何[组合式函数](https://cn.vuejs.org/guide/reusability/composables.html#composables)。不过，请记住，使用组合式函数会让 SSR 变得更加复杂。 + +Setup store 也可以依赖于全局**提供**的属性，比如路由。任何[应用层面提供](https://vuejs.org/api/application.html#app-provide)的属性都可以在 store 中使用 `inject()` 访问，就像在组件中一样： + +```ts +import { inject } from 'vue' +import { useRoute } from 'vue-router' + +export const useSearchFilters = defineStore('search-filters', () => { + const route = useRoute() + // 这里假定 `app.provide('appProvided', 'value')` 已经调用过 + const appProvided = inject('appProvided') + + // ... + + return { + // ... + } +}) +``` + +:::warning +不要返回像 `route` 或 `appProvided` (上例中)之类的属性，因为它们不属于 store，而且你可以在组件中直接用 `useRoute()` 和 `inject('appProvided')` 访问。 +::: ## 你应该选用哪种语法？ %{#what-syntax-should-i-pick}% @@ -83,9 +109,11 @@ const store = useCounterStore() ``` -你可以定义任意多的 store，但为了让使用 pinia 的益处最大化(比如允许构建工具自动进行代码分割以及 TypeScript 推断)，**你应该在不同的文件中去定义 store**。 - +:::tip 如果你还不会使用 `setup` 组件，[你也可以通过**映射辅助函数**来使用 Pinia](../cookbook/options-api.md)。 +::: + +你可以定义任意多的 store，但为了让使用 pinia 的益处最大化 (比如允许构建工具自动进行代码分割以及 TypeScript 推断)，**你应该在不同的文件中去定义 store**。 一旦 store 被实例化，你可以直接访问在 store 的 `state`、`getters` 和 `actions` 中定义的任何属性。我们将在后续章节继续了解这些细节，目前自动补全将帮助你使用相关属性。