Skip to content

Commit

Permalink
docs: fix heading level (#2075)
Browse files Browse the repository at this point in the history
  • Loading branch information
Alanscut authored Oct 15, 2021
1 parent d05b8cf commit eb52dfa
Show file tree
Hide file tree
Showing 12 changed files with 39 additions and 39 deletions.
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

0 comments on commit eb52dfa

Please sign in to comment.