Skip to content

docs: fix heading title #2075

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 15, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/zh/guide/actions.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ actions: {
}
```

### 分发 Action
## 分发 Action

Action 通过 `store.dispatch` 方法触发:

Expand Down Expand Up @@ -97,7 +97,7 @@ actions: {

注意我们正在进行一系列的异步操作,并且通过提交 mutation 来记录 action 产生的副作用(即状态变更)。

### 在组件中分发 Action
## 在组件中分发 Action

你在组件中使用 `this.$store.dispatch('xxx')` 分发 action,或者使用 `mapActions` 辅助函数将组件的 methods 映射为 `store.dispatch` 调用(需要先在根节点注入 `store`):

Expand All @@ -120,7 +120,7 @@ export default {
}
```

### 组合 Action
## 组合 Action

Action 通常是异步的,那么如何知道 action 什么时候结束呢?更重要的是,我们如何才能组合多个 action,以处理更加复杂的异步流程?

Expand Down
2 changes: 1 addition & 1 deletion docs/zh/guide/forms.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ mutations: {
}
```

### 双向绑定的计算属性
## 双向绑定的计算属性

必须承认,这样做比简单地使用“`v-model` + 局部状态”要啰嗦得多,并且也损失了一些 `v-model` 中很有用的特性。另一个方法是使用带有 setter 的双向绑定计算属性:

Expand Down
6 changes: 3 additions & 3 deletions docs/zh/guide/getters.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const store = createStore({
})
```

### 通过属性访问
## 通过属性访问

Getter 会暴露为 `store.getters` 对象,你可以以属性的形式访问这些值:

Expand Down Expand Up @@ -73,7 +73,7 @@ computed: {

注意,getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。

### 通过方法访问
## 通过方法访问

你也可以通过让 getter 返回一个函数,来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。

Expand All @@ -92,7 +92,7 @@ store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

注意,getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果。

### `mapGetters` 辅助函数
## `mapGetters` 辅助函数

`mapGetters` 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:

Expand Down
2 changes: 1 addition & 1 deletion docs/zh/guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地**提交 (commit) mutation**。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

### 最简单的 Store
## 最简单的 Store

:::tip 提示
我们将在后续的文档示例代码中使用 ES2015 语法。如果你还没能掌握 ES2015,[你得抓紧了](https://babeljs.io/docs/learn-es2015/)!
Expand Down
18 changes: 9 additions & 9 deletions docs/zh/guide/modules.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
```

### 模块的局部状态
## 模块的局部状态

对于模块内部的 mutation 和 getter,接收的第一个参数是**模块的局部状态对象**。

Expand Down Expand Up @@ -83,7 +83,7 @@ const moduleA = {
}
```

### 命名空间
## 命名空间

默认情况下,模块内部的 action 和 mutation 仍然是注册在**全局命名空间**的——这样使得多个模块能够对同一个 action 或 mutation 作出响应。Getter 同样也默认注册在全局命名空间,但是目前这并非出于功能上的目的(仅仅是维持现状来避免非兼容性变更)。必须注意,不要在不同的、无命名空间的模块中定义两个相同的 getter 从而导致错误。

Expand Down Expand Up @@ -134,7 +134,7 @@ const store = createStore({

启用了命名空间的 getter 和 action 会收到局部化的 `getter`,`dispatch` 和 `commit`。换言之,你在使用模块内容(module assets)时不需要在同一模块内额外添加空间名前缀。更改 `namespaced` 属性后不需要修改模块内的代码。

#### 在带命名空间的模块内访问全局内容(Global Assets)
### 在带命名空间的模块内访问全局内容(Global Assets)

如果你希望使用全局 state 和 getter,`rootState` 和 `rootGetters` 会作为第三和第四参数传入 getter,也会通过 `context` 对象的属性传入 action。

Expand Down Expand Up @@ -174,7 +174,7 @@ modules: {
}
```

#### 在带命名空间的模块注册全局 action
### 在带命名空间的模块注册全局 action

若需要在带命名空间的模块注册全局 action,你可添加 `root: true`,并将这个 action 的定义放在函数 `handler` 中。例如:

Expand All @@ -200,7 +200,7 @@ modules: {
}
```

#### 带命名空间的绑定函数
### 带命名空间的绑定函数

当使用 `mapState`、`mapGetters`、`mapActions` 和 `mapMutations` 这些函数来绑定带命名空间的模块时,写起来可能比较繁琐:

Expand Down Expand Up @@ -261,7 +261,7 @@ export default {
}
```

#### 给插件开发者的注意事项
### 给插件开发者的注意事项

如果你开发的[插件(Plugin)](plugins.md)提供了模块并允许用户将其添加到 Vuex store,可能需要考虑模块的空间名称问题。对于这种情况,你可以通过插件的参数对象来允许用户指定空间名称:

Expand All @@ -277,7 +277,7 @@ export function createPlugin (options = {}) {
}
```

### 模块动态注册
## 模块动态注册

在 store 创建**之后**,你可以使用 `store.registerModule` 方法注册模块:

Expand All @@ -304,13 +304,13 @@ store.registerModule(['nested', 'myModule'], {

注意,你可以通过 `store.hasModule(moduleName)` 方法检查该模块是否已经被注册到 store。需要记住的是,嵌套模块应该以数组形式传递给 `registerModule` 和 `hasModule`,而不是以路径字符串的形式传递给 module。

#### 保留 state
### 保留 state

在注册一个新 module 时,你很有可能想保留过去的 state,例如从一个服务端渲染的应用保留 state。你可以通过 `preserveState` 选项将其归档:`store.registerModule('a', module, { preserveState: true })`。

当你设置 `preserveState: true` 时,该模块会被注册,action、mutation 和 getter 会被添加到 store 中,但是 state 不会。这里假设 store 的 state 已经包含了这个 module 的 state 并且你不希望将其覆写。

### 模块重用
## 模块重用

有时我们可能需要创建一个模块的多个实例,例如:

Expand Down
12 changes: 6 additions & 6 deletions docs/zh/guide/mutations.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const store = createStore({
store.commit('increment')
```

### 提交载荷(Payload)
## 提交载荷(Payload)

你可以向 `store.commit` 传入额外的参数,即 mutation 的**载荷(payload)**:

Expand Down Expand Up @@ -57,7 +57,7 @@ store.commit('increment', {
})
```

### 对象风格的提交方式
## 对象风格的提交方式

提交 mutation 的另一种方式是直接使用包含 `type` 属性的对象:

Expand All @@ -78,7 +78,7 @@ mutations: {
}
```

### 使用常量替代 Mutation 事件类型
## 使用常量替代 Mutation 事件类型

使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用,同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然:

Expand All @@ -105,7 +105,7 @@ const store = createStore({

用不用常量取决于你——在需要多人协作的大型项目中,这会很有帮助。但如果你不喜欢,你完全可以不这样做。

### Mutation 必须是同步函数
## Mutation 必须是同步函数

一条重要的原则就是要记住 **mutation 必须是同步函数**。为什么?请参考下面的例子:

Expand All @@ -121,7 +121,7 @@ mutations: {

现在想象,我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录,devtools 都需要捕捉到前一状态和后一状态的快照。然而,在上面的例子中 mutation 中的异步函数中的回调让这不可能完成:因为当 mutation 触发的时候,回调函数还没有被调用,devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。

### 在组件中提交 Mutation
## 在组件中提交 Mutation

你可以在组件中使用 `this.$store.commit('xxx')` 提交 mutation,或者使用 `mapMutations` 辅助函数将组件中的 methods 映射为 `store.commit` 调用(需要在根节点注入 `store`)。

Expand All @@ -144,7 +144,7 @@ export default {
}
```

### 下一步:Action
## 下一步:Action

在 mutation 中混合异步调用会导致你的程序很难调试。例如,当你调用了两个包含异步回调的 mutation 来改变状态,你怎么知道什么时候回调和哪个先回调呢?这就是为什么我们要区分这两个概念。在 Vuex 中,**mutation 都是同步事务**:

Expand Down
6 changes: 3 additions & 3 deletions docs/zh/guide/plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const store = createStore({
})
```

### 在插件内提交 Mutation
## 在插件内提交 Mutation

在插件中不允许直接修改状态——类似于组件,只能通过提交 mutation 来触发变化。

Expand Down Expand Up @@ -54,7 +54,7 @@ const store = createStore({
})
```

### 生成 State 快照
## 生成 State 快照

有时候插件需要获得状态的“快照”,比较改变的前后状态。想要实现这项功能,你需要对状态对象进行深拷贝:

Expand Down Expand Up @@ -85,7 +85,7 @@ const store = createStore({

上面插件会默认启用。在发布阶段,你需要使用 webpack 的 [DefinePlugin](https://webpack.js.org/plugins/define-plugin/) 或者是 Browserify 的 [envify](https://github.com/hughsk/envify) 使 `process.env.NODE_ENV !== 'production'` 为 `false`。

### 内置 Logger 插件
## 内置 Logger 插件

Vuex 自带一个日志插件用于一般的调试:

Expand Down
10 changes: 5 additions & 5 deletions docs/zh/guide/state.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# State

### 单一状态树
## 单一状态树

<div class="scrimba"><a href="https://scrimba.com/p/pnyzgAP/cWw3Zhb" target="_blank" rel="noopener noreferrer">在 Scrimba 上尝试这节课</a></div>

Expand All @@ -10,7 +10,7 @@ Vuex 使用**单一状态树**——是的,用一个对象就包含了全部

存储在 Vuex 中的数据和 Vue 实例中的 `data` 遵循相同的规则,例如状态对象必须是纯粹 (plain) 的。**参考:**[Vue#data](https://v3.cn.vuejs.org/api/options-data.html#data-2)。

### 在 Vue 组件中获得 Vuex 状态
## 在 Vue 组件中获得 Vuex 状态

那么我们如何在 Vue 组件中展示状态呢?由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在[计算属性](https://cn.vuejs.org/guide/computed.html)中返回某个状态:

Expand Down Expand Up @@ -43,7 +43,7 @@ const Counter = {
}
```

### `mapState` 辅助函数
## `mapState` 辅助函数

<div class="scrimba"><a href="https://scrimba.com/p/pnyzgAP/c8Pz7BSK" target="_blank" rel="noopener noreferrer">在 Scrimba 上尝试这节课</a></div>

Expand Down Expand Up @@ -79,7 +79,7 @@ computed: mapState([
])
```

### 对象展开运算符
## 对象展开运算符

`mapState` 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢?通常,我们需要使用一个工具函数将多个对象合并为一个,以使我们可以将最终对象传给 `computed` 属性。但是自从有了[对象展开运算符](https://github.com/tc39/proposal-object-rest-spread),我们可以极大地简化写法:

Expand All @@ -93,6 +93,6 @@ computed: {
}
```

### 组件仍然保有局部状态
## 组件仍然保有局部状态

使用 Vuex 并不意味着你需要将**所有的**状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试,但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件,最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。
2 changes: 1 addition & 1 deletion docs/zh/guide/strict.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const store = createStore({

在严格模式下,无论何时发生了状态变更且不是由 mutation 函数引起的,将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。

### 开发环境与发布环境
## 开发环境与发布环境

**不要在发布环境下启用严格模式**!严格模式会深度监测状态树来检测不合规的状态变更——请确保在发布环境下关闭严格模式,以避免性能损失。

Expand Down
2 changes: 1 addition & 1 deletion docs/zh/guide/typescript-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ declare module '@vue/runtime-core' {
}
```

## `useStore` 组合式函数类型声明
## `useStore` 组合式函数类型声明

当使用组合式 API 编写 Vue 组件时,您可能希望 `useStore` 返回类型化的 store。为了 `useStore` 能正确返回类型化的 store,必须执行以下步骤:

Expand Down
4 changes: 2 additions & 2 deletions docs/zh/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

Vuex 是一个专为 Vue.js 应用程序开发的**状态管理模式 + 库**。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

### 什么是“状态管理模式”?
## 什么是“状态管理模式”?

让我们从一个简单的 Vue 计数应用开始:

Expand Down Expand Up @@ -62,7 +62,7 @@ createApp(Counter).mount('#app')

![vuex](/vuex.png)

### 什么情况下我应该使用 Vuex?
## 什么情况下我应该使用 Vuex?

Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

Expand Down
8 changes: 4 additions & 4 deletions docs/zh/installation.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# 安装

### 直接下载 / CDN 引用
## 直接下载 / CDN 引用

[https://unpkg.com/vuex@4](https://unpkg.com/vuex@4)

Expand All @@ -15,19 +15,19 @@
<script src="/path/to/vuex.js"></script>
```

### npm
## npm

``` bash
npm install vuex@next --save
```

### Yarn
## Yarn

``` bash
yarn add vuex@next --save
```

### 自己构建
## 自己构建

如果需要使用 dev 分支下的最新版本,您可以直接从 GitHub 上克隆代码并自己构建。

Expand Down