vuex之actions

简介:

Action 类似于 mutation,不同在于:

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

分发 Action

Action 通过 store.dispatch 方法触发:

store.dispatch('increment')

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

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}
相关文章
|
前端开发 JavaScript BI
轻松搞定vue3+Pinia-2-修改state-patch-actions
轻松搞定vue3+Pinia-2-修改state-patch-actions
237 0
|
6月前
|
前端开发 数据处理 开发者
vuex中mutations详解,与actions的区别
Vuex 的 Mutations 是用于改变 Vuex Store 中状态的一种方式。它是一个同步的操作,用于直接修改 Store 中的状态。
|
18天前
|
监控 JavaScript
Vuex学习二:Vuex的重点属性学习,state、mutations、getters、actions、module。
这篇文章是关于Vuex状态管理库的深入学习,涵盖了其核心概念如state、getters、mutations、actions和modules,并通过实例代码展示了它们的使用和重要性。
14 1
|
3月前
|
JavaScript
成功解决:[vuex] must call Vue.use(Vuex) before creating a store instance.
这篇文章介绍了在使用Vue和Vuex时遇到的一个常见错误:"[vuex] must call Vue.use(Vuex) before creating a store instance." 错误的原因是在使用顺序上出现了问题,即在创建store之前没有正确地声明使用vuex。文章提供了详细的解决方法,即将`Vue.use(Vuex)`直接放在`store/index.js`文件中,以确保在创建store实例之前Vuex已经被Vue使用。通过这种方式,问题得到了成功解决。
成功解决:[vuex] must call Vue.use(Vuex) before creating a store instance.
|
4月前
|
监控 JavaScript
VUEX 使用学习三 : mutations
VUEX 使用学习三 : mutations
22 0
|
6月前
|
JavaScript
如何在Vuex中定义和使用getters和actions
在Vuex中,`getters`用于派生状态值,类似Vue的计算属性,例如从`todos`状态中过滤已完成/未完成任务。`actions`则处理异步操作,如模拟加载数据,通过`commit`改变状态。
|
6月前
|
JavaScript
vuex如何在actions中传递参数
在Vuex的`actions`中传递参数可以提高其灵活性和复用性。
|
12月前
|
前端开发 API
vue3中Pinia的使用之actions
vue3中Pinia的使用之actions
|
6月前
|
JavaScript 前端开发 测试技术
vuex中Actions详解
- Actions 是 Vuex 中的一个重要概念,用于处理异步操作和触发mutations。 - Actions 可以包含任意的 JavaScript 逻辑,包括异步操作(如发送 AJAX 请求)。 - Actions 通过调用 store.dispatch 方法来触发mutations。
|
6月前
|
JavaScript
vuex中的getters
vuex中的getters
31 0