转载请注明出处:
action 用于处理异步任务;action
,可以操作任意的异步操作,类似于mutations
,但是是替代mutations
来进行异步操作的。首先mutations
中必须是同步方法,如果使用了异步,虽然页面上的内容改变了,但实际上Vuex.Store
没有监听到数据的更新
如果通过异步操作变更数据,必须通过Action,而不能使用Mutation,但是在Action中还是要通过触发 Mutation的方式间接变更数据。
1. this.$store.dispatch 是触发actions的第一 种方式
//定义store.js 中定义action actions: { addAsync(context) { setTimeout(()=> { context.commit('add') },1000) } } //在事件方法中通过dispatch触发action add () { // 触发action this.$store.dispatch('addAsync') }
触发异步任务携带参数
mutations: { add(state,step) { state.count += step } }, actions: { addAsync(context,step) { setTimeout(()=> { context.commit('add',step) },1000) } } //触发action add () { this.$store.dispatch('addAsync',5) }
2.触发actions的第二 种方式
1.从vuex中按需求导入mapState函数
import {maptActions} from 'vuex'
2. 将指定的mutations函数,映射为当前组件的methods函数
methods:{ ...maptActions(['addAsync']) }
在网上找到一个demo 示例,可参考学习: https://gitee.com/xiangbaxiang/vue-store
标签: Vue学习使用