Browse Source

action 管理小提示 (#193)

* Tips for action arrangement

* action 管理小提示

* 文字修改

* 加标点

* 文字修改
Changyu Geng 9 years ago
parent
commit
96ee50bc0a
1 changed files with 65 additions and 0 deletions
  1. 65 0
      docs/zh-cn/actions.md

+ 65 - 0
docs/zh-cn/actions.md

@@ -132,3 +132,68 @@ const vm = new Vue({
   }
 })
 ```
+
+### 管理多模块 Actions
+
+通常在大型 App 中,action 应该按不同目的进行 分组 / 模块化 管理,例如,userActions 模块用于处理用户注册、登录、注销,而 shoppingCartActions 处理购物任务。
+
+当想要在不同组件中仅引入必需的 action 时,模块化使之更为方便。
+
+你还可以在 action 模块中引入其他 action 模块来实现复用。
+
+```javascript
+// errorActions.js
+export const setError = ({dispatch}, error) => {
+  dispatch('SET_ERROR', error)
+}
+export const showError = ({dispatch}) => {
+  dispatch('SET_ERROR_VISIBLE', true)
+}
+export const hideError = ({dispatch}) => {
+  dispatch('SET_ERROR_VISIBLE', false)
+}
+```
+
+```javascript
+// userActions.js
+import {setError, showError} from './errorActions'
+
+export const login = ({dispatch}, username, password) => {
+  if (username && password) {
+    doLogin(username, password).done(res => {
+      dispatch('SET_USERNAME', res.username)
+      dispatch('SET_LOGGED_IN', true)
+      dispatch('SET_USER_INFO', res)
+    }).fail(error => {
+      dispatch('SET_INVALID_LOGIN')
+      setError({dispatch}, error)
+      showError({dispatch})
+    })
+  }
+}
+
+```
+
+当从一个模块中调用另一个模块的 action 时,或者调用同一模块中的另一个 action 时,切记,action 的第一个参数是 store 实例,因此应该将调用者 action 的第一个参数传递给被调用 action。
+
+如果你使用 ES6 的解构形式来编写 action,确保调用者 action 的第一个参数包含两个 action 中用到的所有属性和方法。举例说明,调用者 action 仅使用 *dispatch* 方法,而被调用 action 使用了 *state* 属性和 *watch* 方法,那么,*dispatch*、*state* 和 *watch* 应该都出现在传递给调用者 action 的第一个形式参数中,示例如下:
+
+```javascript
+import {callee} from './anotherActionModule'
+
+export const caller = ({dispatch, state, watch}) {
+  dispatch('MUTATION_1')
+  callee({state, watch})
+}
+```
+
+或者,你也可以使用老式的函数语法:
+
+```javascript
+import {callee} from './anotherActionModule'
+
+export const caller = (store) {
+  store.dispatch('MUTATION_1')
+  callee(store)
+}
+```