소스 검색

docs(zh): update (#1718)

* docs(zh): update

* Apply suggestions from code review

Co-Authored-By: GU Yiling <justice360@gmail.com>

Co-authored-by: GU Yiling <justice360@gmail.com>
Jinjiang 5 년 전
부모
커밋
aac08897fc
3개의 변경된 파일47개의 추가작업 그리고 1개의 파일을 삭제
  1. 8 0
      docs/zh/api/README.md
  2. 33 1
      docs/zh/guide/README.md
  3. 6 0
      docs/zh/guide/modules.md

+ 8 - 0
docs/zh/api/README.md

@@ -239,6 +239,14 @@ const store = new Vuex.Store({ ...options })
 
   卸载一个动态模块。[详细介绍](../guide/modules.md#模块动态注册)
 
+### hasModule
+
+- `hasModule(path: string | Array<string>)`
+
+  检查该模块的名字是否已经被注册。[详细介绍](../guide/modules.md#模块动态注册)
+
+  > 3.2.0 新增
+
 ### hotUpdate
 
 - `hotUpdate(newOptions: Object)`

+ 33 - 1
docs/zh/guide/README.md

@@ -17,7 +17,8 @@
 [安装](../installation.md) Vuex 之后,让我们来创建一个 store。创建过程直截了当——仅需要提供一个初始 state 对象和一些 mutation:
 
 ``` js
-// 如果在模块化构建系统中,请确保在开头调用了 Vue.use(Vuex)
+import Vue from 'vue'
+import Vuex from 'vuex'
 
 const store = new Vuex.Store({
   state: {
@@ -39,6 +40,37 @@ store.commit('increment')
 console.log(store.state.count) // -> 1
 ```
 
+为了在 Vue 组件中访问 `this.$store` property,你需要为 Vue 实例提供创建好的 store。Vuex 提供了一个从根组件向所有子组件,以 `store` 选项的方式“注入”该 store 的机制:
+
+``` js
+new Vue({
+  el: '#app',
+  store: store,
+})
+```
+
+:::tip 提示
+如果使用 ES6,你也可以以 ES6 对象的 property 简写 (用在对象某个 property 的 key 和被传入的变量同名时):
+
+```js
+new Vue({
+  el: '#app',
+  store
+})
+```
+:::
+
+现在我们可以从组件的方法提交一个变更:
+
+``` js
+methods: {
+  increment() {
+    this.$store.commit('increment')
+    console.log(this.$store.state.count)
+  }
+}
+```
+
 再次强调,我们通过提交 mutation 的方式,而非直接改变 `store.state.count`,是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显,这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外,这样也让我们有机会去实现一些能记录每次状态改变,保存状态快照的调试工具。有了它,我们甚至可以实现如时间穿梭般的调试体验。
 
 由于 store 中的状态是响应式的,在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。

+ 6 - 0
docs/zh/guide/modules.md

@@ -280,6 +280,10 @@ export function createPlugin (options = {}) {
 在 store 创建**之后**,你可以使用 `store.registerModule` 方法注册模块:
 
 ``` js
+import Vuex from 'vuex'
+
+const store = new Vuex.Store({ /* 选项 */ })
+
 // 注册模块 `myModule`
 store.registerModule('myModule', {
   // ...
@@ -296,6 +300,8 @@ store.registerModule(['nested', 'myModule'], {
 
 你也可以使用 `store.unregisterModule(moduleName)` 来动态卸载模块。注意,你不能使用此方法卸载静态模块(即创建 store 时声明的模块)。
 
+注意,你可以通过 `store.hasModule(moduleName)` 方法检查该模块是否已经被注册到 store。
+
 #### 保留 state
 
 在注册一个新 module 时,你很有可能想保留过去的 state,例如从一个服务端渲染的应用保留 state。你可以通过 `preserveState` 选项将其归档:`store.registerModule('a', module, { preserveState: true })`。