From 6f47a8820a646397060ed2cae8c2006a5e414079 Mon Sep 17 00:00:00 2001 From: Mario Studio Date: Fri, 27 May 2016 02:03:15 +0800 Subject: [PATCH 1/5] Tips for action arrangement --- docs/en/actions.md | 67 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 66 insertions(+), 1 deletion(-) diff --git a/docs/en/actions.md b/docs/en/actions.md index a9b8a483d..7e8172b29 100644 --- a/docs/en/actions.md +++ b/docs/en/actions.md @@ -67,7 +67,7 @@ const vm = new Vue({ }) ``` -What the above code does is bind the raw `incrementBy` action to the component's store instance, and expose it on the component as an instance method, `vm.incrementBy`. Any arguments passed to `vm.incrementBy` will be passed to the raw action function after the first argument which is the store, so calling: +What the above code does is to bind the raw `incrementBy` action to the component's store instance, and expose it on the component as an instance method, `vm.incrementBy`. Any arguments passed to `vm.incrementBy` will be passed to the raw action function after the first argument which is the store, so calling: ``` js vm.incrementBy(1) @@ -132,3 +132,68 @@ const vm = new Vue({ } }) ``` + +### Arrange Actions in Modules + +Normally in large applications, actions should be arranged in groups/modules for different purposes. For example, userActions module deals with user registration, login, logout, and so on, while shoppingCartActions module deals with other tasks for shopping. + +Modularization is more convenient for different components to import only required actions. + +You may import action module into action module for reusability. + +```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}) + }) + } +} + +``` + +While calling actions from one another module, or while calling another action in the same module, remember that actions take a store instance as its first argument, so the action called inside another action should be passed through the first argument for the caller. + +If you write the action with ES6 destructuring style, make sure that the first argument of the caller action covers all the properties and methods of both actions. For example, only *dispatch* is used in the caller action and *state*, *watch* are used in the called action, all the *dispatch*, *state* and *watch* should be presented in the caller first formal argument like this: + +```javascript +import {callee} from './anotherActionModule' + +export const caller = ({dispatch, state, watch}) { + dispatch('MUTATION_1') + callee({state, watch}) +} +``` + +Otherwise, you should use the old-fationed function syntax: + +```javascript +import {callee} from './anotherActionModule' + +export const caller = (store) { + store.dispatch('MUTATION_1') + callee(store) +} +``` From 008c938d59f5b25bed8cdb38477a85278645f3b0 Mon Sep 17 00:00:00 2001 From: KingMario Date: Fri, 27 May 2016 12:46:56 +0800 Subject: [PATCH 2/5] =?UTF-8?q?action=20=E7=AE=A1=E7=90=86=E5=B0=8F?= =?UTF-8?q?=E6=8F=90=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-cn/actions.md | 65 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) diff --git a/docs/zh-cn/actions.md b/docs/zh-cn/actions.md index ce5ecabd9..aa8cc97c2 100644 --- a/docs/zh-cn/actions.md +++ b/docs/zh-cn/actions.md @@ -132,3 +132,68 @@ const vm = new Vue({ } }) ``` + +### 管理多模块 Actions + +通常在大型 App 中，action 应该按不同目的进行 分组 / 模块化 管理，例如，userActions 模块用于处理用户注册、登录、注销，而 shoppingCartActions 处理购物任务。 + +当想要在不同组件中仅 import 必需的 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) +} +``` From 8633b932859af7d159fddff24ede2bbe72d30992 Mon Sep 17 00:00:00 2001 From: KingMario Date: Fri, 27 May 2016 12:55:58 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E6=96=87=E5=AD=97=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-cn/actions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/zh-cn/actions.md b/docs/zh-cn/actions.md index aa8cc97c2..83dd07a6f 100644 --- a/docs/zh-cn/actions.md +++ b/docs/zh-cn/actions.md @@ -137,7 +137,7 @@ const vm = new Vue({ 通常在大型 App 中，action 应该按不同目的进行 分组 / 模块化 管理，例如，userActions 模块用于处理用户注册、登录、注销，而 shoppingCartActions 处理购物任务。 -当想要在不同组件中仅 import 必需的 action 时，模块化使之更为方便。 +当想要在不同组件中仅引入必需的 action 时，模块化使之更为方便。 你还可以在 action 模块中引入其他 action 模块来实现复用。 From 23d28e9f3a1c99a958a43c6235ead73346ab15bc Mon Sep 17 00:00:00 2001 From: KingMario Date: Fri, 27 May 2016 12:59:25 +0800 Subject: [PATCH 4/5] =?UTF-8?q?=E5=8A=A0=E6=A0=87=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-cn/actions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/zh-cn/actions.md b/docs/zh-cn/actions.md index 83dd07a6f..5596cb6b2 100644 --- a/docs/zh-cn/actions.md +++ b/docs/zh-cn/actions.md @@ -174,7 +174,7 @@ export const login = ({dispatch}, username, password) => { ``` -当从一个模块中调用另一个模块的 action 时，或者调用同一模块中的另一个 action 时，记住 action 的第一个参数是 store 实例，因此应该将调用者 action 的第一个参数传递给被调用 action。 +当从一个模块中调用另一个模块的 action 时，或者调用同一模块中的另一个 action 时，记住，action 的第一个参数是 store 实例，因此应该将调用者 action 的第一个参数传递给被调用 action。 如果你使用 ES6 的解构形式来编写 action，确保调用者 action 的第一个参数包含两个 action 中用到的所有属性和方法。举例说明，调用者 action 仅使用 *dispatch* 方法，而被调用 action 使用了 *state* 属性和 *watch* 方法，那么，*dispatch*、*state* 和 *watch* 应该都出现在传递给调用者 action 的第一个形式参数中，示例如下： From 192b38e31d0356a5410184a9e18c614188db958d Mon Sep 17 00:00:00 2001 From: Mario Studio Date: Fri, 27 May 2016 23:21:18 +0800 Subject: [PATCH 5/5] =?UTF-8?q?=E6=96=87=E5=AD=97=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-cn/actions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/zh-cn/actions.md b/docs/zh-cn/actions.md index 5596cb6b2..e08d2bcbe 100644 --- a/docs/zh-cn/actions.md +++ b/docs/zh-cn/actions.md @@ -174,7 +174,7 @@ export const login = ({dispatch}, username, password) => { ``` -当从一个模块中调用另一个模块的 action 时，或者调用同一模块中的另一个 action 时，记住，action 的第一个参数是 store 实例，因此应该将调用者 action 的第一个参数传递给被调用 action。 +当从一个模块中调用另一个模块的 action 时，或者调用同一模块中的另一个 action 时，切记，action 的第一个参数是 store 实例，因此应该将调用者 action 的第一个参数传递给被调用 action。 如果你使用 ES6 的解构形式来编写 action，确保调用者 action 的第一个参数包含两个 action 中用到的所有属性和方法。举例说明，调用者 action 仅使用 *dispatch* 方法，而被调用 action 使用了 *state* 属性和 *watch* 方法，那么，*dispatch*、*state* 和 *watch* 应该都出现在传递给调用者 action 的第一个形式参数中，示例如下：