挑战全网最幽默的Vuex系列教程:第四讲 Vuex旗下的Action

简介: 通过上一讲「Vuex 旗下的 Mutation」,我们知道了如何去修改 State 的数据,而且只能通过 Mutation 去提交修改,另外还了解到了 Mutation 必须是同步函数,那么如果需求当中必须要用到异步函数怎么办?

写在前面


通过上一讲「Vuex 旗下的 Mutation」,我们知道了如何去修改 State 的数据,而且只能通过 Mutation 去提交修改,另外还了解到了 Mutation 必须是同步函数,那么如果需求当中必须要用到异步函数怎么办?


好办,那就轮到 Action 上场了。


简单介绍


Action 类似于 mutation,不同在于:


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


看一个简单的 action 示例:


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


可以看到,Action 函数接受一个 context 参数,注意,这个参数可不一般,它与 store 实例有着相同的方法和属性,但是他们并不是同一个实例,后面学习 Modules 的时候会介绍它们为什么不一样。


所以在这里可以使用 context.commit 来提交一个 mutation,或者通过 context.statecontext.getters 来获取 state 和 getters。


当然,为了代码简化,我们可以使用 ES2015 的 参数解构 来直接展开,便于 commitstate 等多次调用。如下:


actions: {
  increment ({ commit }) {
    commit('increment')
  }
}


分发 Action


store.dispatch('increment')


Mutation 通过 store.commit 触发,那么 Action 则通过 store.dispatch 方法触发。

乍一眼看上去感觉多此一举,我们直接分发 mutation 岂不更方便?实际上并非如此,还记得 mutation 必须同步执行这个限制么?Action 就不受约束!我们可以在 action 内部执行异步操作:


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


和 Mutation 分发的方式异曲同工,这是注意这里是 dispatch


// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})
// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})


来看一个更加实际的购物车示例,涉及到调用异步 API 和分发多重 mutation:


actions: {
  checkout ({ commit, state }, products) {
    // 把当前购物车的物品备份起来
    const savedCartItems = [...state.cart.added]
    // 发出结账请求,然后乐观地清空购物车
    commit(types.CHECKOUT_REQUEST)
    // 购物 API 接受一个成功回调和一个失败回调
    shop.buyProducts(
      products,
      // 成功操作
      () => commit(types.CHECKOUT_SUCCESS),
      // 失败操作
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}


注意示例中正在进行一系列的异步操作,并且通过提交 mutation 来记录 action 产生的副作用(即状态变更)。


组合 Action Action 通常是异步的,那么如何知道 action 什么时候结束呢?更重要的是,我们如何才能组合多个 action,以处理更加复杂的异步流程?


首先,你需要明白 store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise,并且store.dispatch 仍旧返回 Promise:


不知道什么是 Promise 的,可以 戳此了解下


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


调用:


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


当然,也可以这样:


actions: {
  // ...
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}


我们还可以利用 async / await 的方式组合 action :


// 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}


一个store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下,只有当所有触发函数完成后,返回的 Promise 才会执行。


我们在实际项目中经常的会遇到这种情况,比如说你现在想要处理 B 事件,但是 B 事件需要一种资源才能进行,而这种资源必须通过 A 事件来获得。这个时候,我们就需要组合 Action 来处理这些事件了。


写在最后


这一讲官方讲解得非常清晰,基本上没啥难理解的,所以大部分都是直接引用了。当然,有任何的疑问都可以在下方留言和我一起沟通讨论,谢谢!


转载声明:


作者:大宏说 链接:www.jianshu.com/p/7238d4d42…


相关文章
|
4月前
|
存储 前端开发 JavaScript
解锁前端高手之路:Vuex 状态管理实战,从零到精通的旅程!
【8月更文挑战第27天】状态管理在大型单页应用开发中至关重要。Vue.js 通过其官方工具 Vuex 提供了一套强大且直观的 API。本文从零开始引导你逐步掌握 Vuex。首先介绍如何安装和配置,然后通过具体示例深入探讨状态(State)、变更(Mutations)、动作(Actions)以及模块化 Store 的使用方法。最后,通过购物车管理实战案例展示如何运用 Vuex 解决复杂状态管理问题。掌握这些技巧后,你将能在项目中高效地利用 Vuex。
34 1
|
4月前
|
JavaScript 前端开发 开发者
决战前端之巅!Element UI与Vuetify谁才是Vue.js组件界的霸主?一场关于颜值与实力的较量!
【8月更文挑战第30天】本文对比了两款热门的Vue.js组件库——Element UI与Vuetify。Element UI由饿了么团队打造,提供多种高质量UI组件,设计简洁大方。Vuetify基于Material Design规范,支持Vue.js 2.0及3.0版本,具备前瞻性。两者均涵盖表单、导航、数据展示等组件,Element UI配置选项丰富,而Vuetify则提供了更深层的样式定制功能。开发者可根据项目需求及个人偏好选择合适的组件库。
325 0
|
4月前
|
JavaScript 前端开发 UED
【绝技大公开】Vue.js高手教你如何从零到英雄,构建梦幻电商平台前端!
【8月更文挑战第30天】本文通过对比传统网页开发方式,介绍了使用Vue.js及其生态构建电商平台前端的方法。从初始化项目到配置路由、状态管理,再到实现首页、商品列表与详情页,每个环节都提供了具体代码示例,展示了Vue.js在提升开发效率与应用可维护性方面的优势。适合希望了解现代前端技术栈的开发者阅读。通过本教程,读者可以学习到如何利用Vue Router、Vuex等工具搭建完整的Web应用。
52 0
|
4月前
|
存储 JavaScript
Vuex 最佳实践:借势技术热点,打造 Vue 应用的可维护与可扩展之梦,你还在等什么?
【8月更文挑战第27天】Vuex是Vue.js的状态管理工具,适用于复杂应用的状态集中管理,使状态变更更为清晰、可预测及易维护。其核心特点包括:利用单一状态树来集中存放应用所有状态,便于追踪变化并简化管理;通过模块划分对大型应用进行拆分,以增强代码可维护性并明确各模块职责;借助命名空间防止模块间命名冲突;启用严格模式确保状态变更只能通过mutations进行,提升代码质量。示例代码展示了商品和购物车模块的定义与使用,说明如何在Vue组件中调用Vuex的状态和操作。
40 0
|
4月前
|
JavaScript 前端开发
《Vue-CLI 强势来袭!2024 前端新潮流,从 0 到 1 快速入门,开启高效 Vue 项目开发奇幻之旅》
【8月更文挑战第21天】在前端开发领域,Vue.js 因其简洁高效广受欢迎。本文引导你快速掌握 vue-cli,轻松启动 Vue 项目。首先全局安装 vue-cli (`npm install -g @vue/cli`) 并验证安装 (`vue --version`)。接着使用 `vue create my-project` 创建项目,选择预设配置。项目结构清晰,包含源码、静态资源及依赖。运行 `npm run serve` 启动本地服务器,即可在浏览器预览。最后,通过简单示例代码展示组件创建与引用。跟随本文,你将迅速上手 vue-cli,开始 Vue 开发之旅。
45 0
|
7月前
|
前端开发 JavaScript 大数据
❤️[前端学习]大数据全栈工程师之一文快速上手vue3❤️
❤️[前端学习]大数据全栈工程师之一文快速上手vue3❤️
89 0
|
7月前
|
前端开发 JavaScript 容器
前端炫技合集,简单的TODoList,简单的技术,实现不简单的效果
前端炫技合集,简单的TODoList,简单的技术,实现不简单的效果
151 0
|
JavaScript
2021-07-27大连东软实训第七天---vue编程式路由,VUEX
2021-07-27大连东软实训第七天---vue编程式路由,VUEX
61 0
|
监控 前端开发 Devops
微前端热度不再?qiankun 作者有话说
微前端热度不再?qiankun 作者有话说
334 0
|
JavaScript API
Vuex 4.0 正式发布!新年,官方生态齐聚一堂。
Vuex 4 官方版本正式发布。 Vuex 4 的重点是兼容性。Vuex 4 支持 Vue 3,但是仍然提供了与 Vuex 3 完全相同的 API,因此用户可以在 Vue 3 中直接复用他们现有的 Vuex 代码。