Action 相似于 mutation,不一样在于:vue
Action 提交的是 mutation,而不是直接变动状态。
Action 能够包含任意异步操做。vuex
dispatch 推送一个actionapp
更改 Vuex 的 store 中的状态的惟一方法是提交 mutation。
commit 推送一个mutation
main.js中异步
import Vuex from 'vuex' Vue.use(vuex); const store = new Vuex.store({ state: { nickName: "", cartCount: 0 }, mutations: { updateUserInfo(state,nickName) { state.nickName = nickName; }, updateCartCount(state,cartCount) { state.cartCount += cartCount; } }, actions: { updateUserInfo(context) { context.commit("updateUserInfo"); }, updateCartCount(context) { context.commit("updateCartCount"); } } }) new Vue({ el: "#app", store, router, template: '<App/>', components: {App} })
组件中:async
methods: { increment(){ this.$store.dispatch("updateUserInfo", 'nick'); //this.$store.commit("increment", 'nick'); }, decrement() { this.$store.dispatch("updateCartCount", 1); // this.$store.commit("decrement", 1); } }
mutations: { updateUserInfo(state, payload) { state.userId = payload.userId; state.avatar = payload.avatar; }, updateEnergy(state, payload) { state.energy = payload; } }, actions: { async pageBeforeRender({ dispatch }) { // 当页面渲染前,会调用该接口查询数据 return await dispatch('requestUserInfo'); }, async requestUserInfo({ commit }) { try { const payload = await ap.getUserInfo(); commit('updateUserInfo', payload); } catch (ex) { ap.showToast({ content: '请求失败', type: 'fail' }); } }
区别:this
dispatch:含有异步操做,例如向后台提交数据,写法: this.$store.dispatch('mutations方法名',值)spa
commit:同步操做,写法:this.$store.commit('mutations方法名',值)code