Vue Store 使用 Action in Action

在 Vue Store 中，可以使用 action in action 的方式来进行复杂的业务逻辑处理。

什么是 Action in Action

Action in Action 就是在一个 action 中调用另一个 action，也就是说一个 action 可以调用多个 action。

使用 action in action 有以下优点：

• 复用性好：可以将一些公共逻辑抽象成单独的 action，然后在其他 action 中重复使用。
• 可维护性高：将复杂的业务逻辑分拆成多个 action，可以更加清晰地组织代码，减少代码耦合度，提高可维护性。

如何使用 Action in Action

在 Vue Store 中，可以使用 dispatch 方法来触发一个 action，这个方法和在组件中使用 $emit 传递事件类似。

下面是一个简单的例子：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    },
    incrementTwice({ dispatch }) {
      dispatch('incrementAsync').then(() => {
        return dispatch('incrementAsync')
      })
    }
  }
})

在上面的代码中，有两个 action，incrementAsync 和 incrementTwice。

incrementAsync 方法是一个异步的 action，会在 1 秒后将 count 值加 1。

而 incrementTwice 方法则是将 incrementAsync 方法调用了两次，并且将返回的 Promise 进行了链式调用。

可以看到，在 incrementTwice 方法中，我们调用了 dispatch('incrementAsync') 两次，也就是调用了两个 action。当第一个 action 完成之后，其返回的 Promise 会被当做 then 方法的返回值传递给第二个 action。

总结

使用 Action in Action 可以更好地组织代码，将复杂的业务逻辑分拆成多个 action，提高代码的可维护性。

在 Vue Store 中，使用 dispatch 方法来触发一个 action，可以方便地在一个 action 中调用另一个 action。