vuex中 mutation的函数必须是同步的,而Action可以做任意异步的操作,这里用demo说明一下
上代码:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
// 这个mutation是同步的,直接修改状态
state.count++;
}
},
actions: {
incrementAsync({ commit }) {
// 这个action是异步的,通过mutation来修改状态
setTimeout(() => {
commit('increment');
}, 1000);
}
}
});
const app = new Vue({
el: '#app',
store,
template: '<div>{{ count }}</div>'
});
总结
state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法,同步!
actions => 像一个装饰器,包裹mutations,使之可以异步。
modules => 模块化Vuex