diff --git a/docs/zh/guide/actions.md b/docs/zh/guide/actions.md index ed58c30cb..5e7d76aed 100644 --- a/docs/zh/guide/actions.md +++ b/docs/zh/guide/actions.md @@ -39,7 +39,7 @@ actions: { } ``` -### 分发 Action +## 分发 Action Action 通过 `store.dispatch` 方法触发: @@ -97,7 +97,7 @@ actions: { 注意我们正在进行一系列的异步操作,并且通过提交 mutation 来记录 action 产生的副作用(即状态变更)。 -### 在组件中分发 Action +## 在组件中分发 Action 你在组件中使用 `this.$store.dispatch('xxx')` 分发 action,或者使用 `mapActions` 辅助函数将组件的 methods 映射为 `store.dispatch` 调用(需要先在根节点注入 `store`): @@ -120,7 +120,7 @@ export default { } ``` -### 组合 Action +## 组合 Action Action 通常是异步的,那么如何知道 action 什么时候结束呢?更重要的是,我们如何才能组合多个 action,以处理更加复杂的异步流程? diff --git a/docs/zh/guide/forms.md b/docs/zh/guide/forms.md index 919095f78..d229ed2e1 100644 --- a/docs/zh/guide/forms.md +++ b/docs/zh/guide/forms.md @@ -40,7 +40,7 @@ mutations: { } ``` -### 双向绑定的计算属性 +## 双向绑定的计算属性 必须承认,这样做比简单地使用“`v-model` + 局部状态”要啰嗦得多,并且也损失了一些 `v-model` 中很有用的特性。另一个方法是使用带有 setter 的双向绑定计算属性: diff --git a/docs/zh/guide/getters.md b/docs/zh/guide/getters.md index 2433e3caa..cc016797a 100644 --- a/docs/zh/guide/getters.md +++ b/docs/zh/guide/getters.md @@ -38,7 +38,7 @@ const store = createStore({ }) ``` -### 通过属性访问 +## 通过属性访问 Getter 会暴露为 `store.getters` 对象,你可以以属性的形式访问这些值: @@ -73,7 +73,7 @@ computed: { 注意,getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。 -### 通过方法访问 +## 通过方法访问 你也可以通过让 getter 返回一个函数,来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。 @@ -92,7 +92,7 @@ store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false } 注意,getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果。 -### `mapGetters` 辅助函数 +## `mapGetters` 辅助函数 `mapGetters` 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性: diff --git a/docs/zh/guide/index.md b/docs/zh/guide/index.md index c2b457c15..832a7233e 100644 --- a/docs/zh/guide/index.md +++ b/docs/zh/guide/index.md @@ -8,7 +8,7 @@ 2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地**提交 (commit) mutation**。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。 -### 最简单的 Store +## 最简单的 Store :::tip 提示 我们将在后续的文档示例代码中使用 ES2015 语法。如果你还没能掌握 ES2015,[你得抓紧了](https://babeljs.io/docs/learn-es2015/)! diff --git a/docs/zh/guide/modules.md b/docs/zh/guide/modules.md index 16980cc66..47fc1f8f1 100644 --- a/docs/zh/guide/modules.md +++ b/docs/zh/guide/modules.md @@ -31,7 +31,7 @@ store.state.a // -> moduleA 的状态 store.state.b // -> moduleB 的状态 ``` -### 模块的局部状态 +## 模块的局部状态 对于模块内部的 mutation 和 getter,接收的第一个参数是**模块的局部状态对象**。 @@ -83,7 +83,7 @@ const moduleA = { } ``` -### 命名空间 +## 命名空间 默认情况下,模块内部的 action 和 mutation 仍然是注册在**全局命名空间**的——这样使得多个模块能够对同一个 action 或 mutation 作出响应。Getter 同样也默认注册在全局命名空间,但是目前这并非出于功能上的目的(仅仅是维持现状来避免非兼容性变更)。必须注意,不要在不同的、无命名空间的模块中定义两个相同的 getter 从而导致错误。 @@ -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。 @@ -174,7 +174,7 @@ modules: { } ``` -#### 在带命名空间的模块注册全局 action +### 在带命名空间的模块注册全局 action 若需要在带命名空间的模块注册全局 action,你可添加 `root: true`,并将这个 action 的定义放在函数 `handler` 中。例如: @@ -200,7 +200,7 @@ modules: { } ``` -#### 带命名空间的绑定函数 +### 带命名空间的绑定函数 当使用 `mapState`、`mapGetters`、`mapActions` 和 `mapMutations` 这些函数来绑定带命名空间的模块时,写起来可能比较繁琐: @@ -261,7 +261,7 @@ export default { } ``` -#### 给插件开发者的注意事项 +### 给插件开发者的注意事项 如果你开发的[插件(Plugin)](plugins.md)提供了模块并允许用户将其添加到 Vuex store,可能需要考虑模块的空间名称问题。对于这种情况,你可以通过插件的参数对象来允许用户指定空间名称: @@ -277,7 +277,7 @@ export function createPlugin (options = {}) { } ``` -### 模块动态注册 +## 模块动态注册 在 store 创建**之后**,你可以使用 `store.registerModule` 方法注册模块: @@ -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 并且你不希望将其覆写。 -### 模块重用 +## 模块重用 有时我们可能需要创建一个模块的多个实例,例如: diff --git a/docs/zh/guide/mutations.md b/docs/zh/guide/mutations.md index 8ee1fb1f8..a3393336b 100644 --- a/docs/zh/guide/mutations.md +++ b/docs/zh/guide/mutations.md @@ -24,7 +24,7 @@ const store = createStore({ store.commit('increment') ``` -### 提交载荷(Payload) +## 提交载荷(Payload) 你可以向 `store.commit` 传入额外的参数,即 mutation 的**载荷(payload)**: @@ -57,7 +57,7 @@ store.commit('increment', { }) ``` -### 对象风格的提交方式 +## 对象风格的提交方式 提交 mutation 的另一种方式是直接使用包含 `type` 属性的对象: @@ -78,7 +78,7 @@ mutations: { } ``` -### 使用常量替代 Mutation 事件类型 +## 使用常量替代 Mutation 事件类型 使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用,同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然: @@ -105,7 +105,7 @@ const store = createStore({ 用不用常量取决于你——在需要多人协作的大型项目中,这会很有帮助。但如果你不喜欢,你完全可以不这样做。 -### Mutation 必须是同步函数 +## Mutation 必须是同步函数 一条重要的原则就是要记住 **mutation 必须是同步函数**。为什么?请参考下面的例子: @@ -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`)。 @@ -144,7 +144,7 @@ export default { } ``` -### 下一步:Action +## 下一步:Action 在 mutation 中混合异步调用会导致你的程序很难调试。例如,当你调用了两个包含异步回调的 mutation 来改变状态,你怎么知道什么时候回调和哪个先回调呢?这就是为什么我们要区分这两个概念。在 Vuex 中,**mutation 都是同步事务**: diff --git a/docs/zh/guide/plugins.md b/docs/zh/guide/plugins.md index 6f164f35f..de068d94d 100644 --- a/docs/zh/guide/plugins.md +++ b/docs/zh/guide/plugins.md @@ -23,7 +23,7 @@ const store = createStore({ }) ``` -### 在插件内提交 Mutation +## 在插件内提交 Mutation 在插件中不允许直接修改状态——类似于组件,只能通过提交 mutation 来触发变化。 @@ -54,7 +54,7 @@ const store = createStore({ }) ``` -### 生成 State 快照 +## 生成 State 快照 有时候插件需要获得状态的“快照”,比较改变的前后状态。想要实现这项功能,你需要对状态对象进行深拷贝: @@ -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 自带一个日志插件用于一般的调试: diff --git a/docs/zh/guide/state.md b/docs/zh/guide/state.md index 411e64a86..51138701e 100644 --- a/docs/zh/guide/state.md +++ b/docs/zh/guide/state.md @@ -1,6 +1,6 @@ # State -### 单一状态树 +## 单一状态树
在 Scrimba 上尝试这节课
@@ -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)中返回某个状态: @@ -43,7 +43,7 @@ const Counter = { } ``` -### `mapState` 辅助函数 +## `mapState` 辅助函数
在 Scrimba 上尝试这节课
@@ -79,7 +79,7 @@ computed: mapState([ ]) ``` -### 对象展开运算符 +## 对象展开运算符 `mapState` 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢?通常,我们需要使用一个工具函数将多个对象合并为一个,以使我们可以将最终对象传给 `computed` 属性。但是自从有了[对象展开运算符](https://github.com/tc39/proposal-object-rest-spread),我们可以极大地简化写法: @@ -93,6 +93,6 @@ computed: { } ``` -### 组件仍然保有局部状态 +## 组件仍然保有局部状态 使用 Vuex 并不意味着你需要将**所有的**状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试,但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件,最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。 diff --git a/docs/zh/guide/strict.md b/docs/zh/guide/strict.md index b19a4fea1..6ff0f3a59 100644 --- a/docs/zh/guide/strict.md +++ b/docs/zh/guide/strict.md @@ -11,7 +11,7 @@ const store = createStore({ 在严格模式下,无论何时发生了状态变更且不是由 mutation 函数引起的,将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。 -### 开发环境与发布环境 +## 开发环境与发布环境 **不要在发布环境下启用严格模式**!严格模式会深度监测状态树来检测不合规的状态变更——请确保在发布环境下关闭严格模式,以避免性能损失。 diff --git a/docs/zh/guide/typescript-support.md b/docs/zh/guide/typescript-support.md index f8cc501bd..84794c8cc 100644 --- a/docs/zh/guide/typescript-support.md +++ b/docs/zh/guide/typescript-support.md @@ -28,7 +28,7 @@ declare module '@vue/runtime-core' { } ``` -## `useStore` 组合式函数类型声明 +## `useStore` 组合式函数类型声明 当使用组合式 API 编写 Vue 组件时,您可能希望 `useStore` 返回类型化的 store。为了 `useStore` 能正确返回类型化的 store,必须执行以下步骤: diff --git a/docs/zh/index.md b/docs/zh/index.md index 6a4740fd0..c43a4f671 100644 --- a/docs/zh/index.md +++ b/docs/zh/index.md @@ -6,7 +6,7 @@ Vuex 是一个专为 Vue.js 应用程序开发的**状态管理模式 + 库**。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 -### 什么是“状态管理模式”? +## 什么是“状态管理模式”? 让我们从一个简单的 Vue 计数应用开始: @@ -62,7 +62,7 @@ createApp(Counter).mount('#app') ![vuex](/vuex.png) -### 什么情况下我应该使用 Vuex? +## 什么情况下我应该使用 Vuex? Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。 diff --git a/docs/zh/installation.md b/docs/zh/installation.md index 696117e57..34baaacdc 100644 --- a/docs/zh/installation.md +++ b/docs/zh/installation.md @@ -1,6 +1,6 @@ # 安装 -### 直接下载 / CDN 引用 +## 直接下载 / CDN 引用 [https://unpkg.com/vuex@4](https://unpkg.com/vuex@4) @@ -15,19 +15,19 @@ ``` -### npm +## npm ``` bash npm install vuex@next --save ``` -### Yarn +## Yarn ``` bash yarn add vuex@next --save ``` -### 自己构建 +## 自己构建 如果需要使用 dev 分支下的最新版本,您可以直接从 GitHub 上克隆代码并自己构建。