通常在大型 App 中，action 应该按不同目的进行 分组 / 模块化 管理，例如，userActions 模块用于处理用户注册、登录、注销，而 shoppingCartActions 处理购物任务。

当想要在不同组件中仅引入必需的 action 时，模块化使之更为方便。

你还可以在 action 模块中引入其他 action 模块来实现复用。

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)

}

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 的第一个形式参数中，示例如下：

import {callee} from './anotherActionModule'

export const caller = ({dispatch, state, watch}) {

dispatch('MUTATION_1')

callee({state, watch})

}

或者，你也可以使用老式的函数语法：

import {callee} from './anotherActionModule'

export const caller = (store) {

store.dispatch('MUTATION_1')

callee(store)

}