【快速入门Vue系列】第四十篇:Vuex的Action和Module的应用(系列完结篇)

语言: CN / TW / HK

theme: qklhk-chocolate

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

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

Vuex_Action

Action 类似于 mutation,不同在于:

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

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

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

分发Action

js store.dispatch('increment')

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

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

组合 Action

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

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

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

Vuex 管理模式

Vuex_Module

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

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

js modules: { a, b }

  • 获取 state:this.$store.state.moduleName.xxx
  • 获取 getter: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
  • 获取 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,根节点状态会作为第三个参数暴露出来。

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

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

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

image.png

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