这是我参与11月更文挑战的第27天，活动详情查看：2021最后一次更文挑战

首先要真心感谢一直支持我到现在的粉丝，也感谢掘金能给我这么一个分享的平台，写作期间收获了我的小粉丝，也感受到了创作的快乐，小伙伴们到这里我们就完结了，有哪里不懂或者不好的地方欢迎指正哦，也恭喜能看到现在的小伙伴，文末博主也准备了奖励哦！愿你历经千帆归来仍是少年

Vuex_Action

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

分发Action

store.dispatch('increment')

虽然和mutation差不多，但是在action中，可以执行异步操作，但是mutation中不行！！！

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

组合 Action

Action 通常是异步的，那么如何知道 action 什么时候结束呢？

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

store.dispatch('actionA').then(() => {
   // ... 
})

Vuex 管理模式

Vuex_Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter。

modules: {
  a,
  b
}

获取 state：[this. $store.state.moduleName.xxx](<> "this.$ store.state.moduleName.xxx")
获取 getter：[this. $store.getters.xxx](<> "this.$ store.getters.xxx")
提交 mutation：this.$store.commit('xxx');
分发 action：this.$store.dispatch('xxx');
可以通过mapXXX的方式拿到getters、mutations、actions，但是不能拿到state，如果想通过这种方式获得state，需要加命名空间。

命名空间

可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。

获取 state：[this. $store.state.moduleName.xxx](<> "this.$ store.state.moduleName.xxx")
获取 getter：this.$store.['moduleName/getters'].xxx
提交 mutation：this.$store.commit('moduleName/xxx');
分发 action：this.$store.dispatch('moduleName/xxx');
可以通过mapXXX的方式获取到state、getters、mutations、actions。

模块的局部状态

对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。

同样，对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState。

对于模块内部的 getter，根节点状态会作为第三个参数暴露出来。

最后给坚持下来小伙伴的奖励

如果对您有帮助，希望能给个👍评论收藏三连！

前端老实人不止会前端哦，听说小伙伴都喜欢这些东西？

想跟博主交朋友的可以通过查看主页：前端老实人，获取资料哦

【快速入门Vue系列】第四十篇：Vuex的Action和Module的应用（系列完结篇）