Skip to content

Commit

Permalink
docs(zh,en): Update translation of core-concepts/index, move SSR link…
Browse files Browse the repository at this point in the history
… 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 <[email protected]>

* typeset fix line-92

Co-authored-by: Xavi Lee <[email protected]>

* typeset fix @line-72

Co-authored-by: Xavi Lee <[email protected]>

* typeset fix @line-115

Co-authored-by: Xavi Lee <[email protected]>

---------

Co-authored-by: Xavi Lee <[email protected]>
  • Loading branch information
PrainLopez and awxiaoxian2020 committed Mar 4, 2024
1 parent 13f6f31 commit 86c25ed
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 6 deletions.
4 changes: 2 additions & 2 deletions packages/docs/core-concepts/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
36 changes: 32 additions & 4 deletions packages/docs/zh/core-concepts/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
// 其他配置...
Expand Down Expand Up @@ -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}%

Expand All @@ -83,9 +109,11 @@ const store = useCounterStore()
</script>
```

你可以定义任意多的 store,但为了让使用 pinia 的益处最大化(比如允许构建工具自动进行代码分割以及 TypeScript 推断),**你应该在不同的文件中去定义 store**

:::tip
如果你还不会使用 `setup` 组件,[你也可以通过**映射辅助函数**来使用 Pinia](../cookbook/options-api.md)
:::

你可以定义任意多的 store,但为了让使用 pinia 的益处最大化 (比如允许构建工具自动进行代码分割以及 TypeScript 推断),**你应该在不同的文件中去定义 store**

一旦 store 被实例化,你可以直接访问在 store 的 `state``getters``actions` 中定义的任何属性。我们将在后续章节继续了解这些细节,目前自动补全将帮助你使用相关属性。

Expand Down

0 comments on commit 86c25ed

Please sign in to comment.