vue.js

Vuex Actions 异步修改状态

2019-07-18  本文已影响0人  Rising_life

Action 类似于 mutation,不同在于:

Action 提交的是 mutation,而不是直接变更状态。

Action 可以包含任意异步操作。

注册一个简单的 action:

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

分发 Action

Action 通过 store.dispatch 方法触发:

mutation 必须同步执行,Action 就不受约束, 在 action 内部执行异步操作:

在addAction里使用setTimeOut进行延迟执行

Actions 支持同样的载荷方式和对象方式进行分发:

接收载荷:

mapActions辅助函数

在组件中使用 this.$store.dispatch('xxx') 分发 action,或者使用 mapActions辅助函数将组件的 methods 映射为 store.dispatch 调用(需要先在根节点注入 store):

组合 Action

待续。。。。

上一篇下一篇

猜你喜欢

热点阅读