vuex中action 方法互相调用

项目场景：

提示：这里简述项目相关背景：

在一些项目中，会有一些公共请求由于使用的较多，所以会托管vuex的actions中。

那么如果在actions中有两个或者是三个请求的时候，而且这几个请求时相关联的时候，那么就要相互调用了

---

关于vuex简单描述

Vuex是一个专为Vue.js应用程序开发的状态管理模式。vuex的核心概念包括state（状态）、mutations（变化）、actions（动作）和getters（获取器）。在Vuex中，actions用于处理异步操作和复杂逻辑，而mutations用于同步修改state的值。

在Vuex中，actions可以互相调用，这使得我们可以在一个action中调用另一个action来实现更复杂的逻辑。这种互相调用的方式可以提高代码的重用性和可维护性，使得我们的代码更加清晰和易于理解。

在Vuex中，actions用于处理异步操作和复杂逻辑。一个action可以包含多个异步操作，可以通过调用其他的action来实现更复杂的逻辑。当我们需要触发一个action时，可以使用store.dispatch()方法来调用该action。

比如，我们有一个名为getUserInfo的action，用于获取用户信息。在该action中，我们可以调用其他的action来处理不同的逻辑。例如，我们可以在getUserInfo中调用getUserName和getUserAge等action来获取用户的姓名和年龄。

---

实例1：

提示：这里是实例

// store.js

import { createStore } from 'vuex'
const store = createStore({
  state: {
    userInfo: {}
  },
  mutations: {
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo
    }
  },
  actions: {
    getUserInfo({ dispatch }) {
      dispatch('getUserName')
      dispatch('getUserAge')
    },
    getUserName({ commit }) {
      // 调用接口获取用户姓名
      // ...
      commit('setUserInfo', { name: '张三' })
    },
    getUserAge({ commit }) {
      // 调用接口获取用户年龄
      // ...
      commit('setUserInfo', { age: 20 })
    }
  },
  getters: {
    userName(state) {
      return state.userInfo.name || ''
    },
    userAge(state) {
      return state.userInfo.age || 0
    }
  }
})
export default store

在上面的代码中，我们定义了一个名为getUserInfo的action，该action通过调用getUserName和getUserAge来获取用户的姓名和年龄，并将获取到的信息保存到state中。 

在getUserName和getUserAge的实现中，我们可以调用接口来获取用户的姓名和年龄。在这里，我们省略了实际调用接口的代码，以便更好地展示action之间的调用关系。

当我们需要获取用户信息时，只需要在组件中调用store.dispatch('getUserInfo')即可。在调用getUserInfo时，getUserName和getUserAge也会被自动触发，从而实现获取用户信息的完整逻辑。

除了在一个action中调用其他的action，我们还可以在action中调用mutations来修改state的值。在Vuex中，mutations是同步修改state的值的唯一方式。通过在action中调用mutations，我们可以在处理异步操作时同步地修改state的值，从而保持state的一致性。

总结一下，Vuex的actions可以互相调用，这使得我们可以在一个action中调用另一个action来实现更复杂的逻辑。通过合理地使用actions的互相调用，我们可以提高代码的重用性和可维护性，使得我们的代码更加清晰和易于理解。

以上就是关于Vuex actions方法互相调用的内容，希望对你有所帮助。如果还有其他问题，请随时提问。

---

实例2 async与await 的使用：

actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}