前言

在vuex中提交 mutation 是更改狀態的唯一方法，并且這個過程是同步的，異步邏輯都應該封裝到 action 里面。對于mutation/action，有一個常見的操作就是傳參，也就是官網上說的“提交載荷”。

這里是關于如何在vue-cli中使用vuex的方法，我們采用將vuex設置分割成不同模塊的方法。其中，state模塊中配置如下

//vuex中的stateconst state = {  count: 0}export default state;

mutation傳參

樸實無華的方式

mutation.js

//vuex中的mutationconst mutations = {  increment: (state,n) => {    //n是從組件中傳來的參數    state.count += n;  }}export default mutations;

vue組件中（省去其他代碼）

methods: {  add(){    //傳參    this.$store.commit('increment',5);  }}

對象風格提交參數

mutation.js

//vuex中的mutationconst mutations = {  decrementa: (state,payload) => {    state.count -= payload.amount;  }}export default mutations;

vue組件

methods: {  reducea(){    //對象風格傳參    this.$store.commit({      type: 'decrementa',      amount: 5    });  },}

action傳參

樸實無華

action.js

/vuex中的actionconst actions = {  increment(context,args){    context.commit('increment',args);  }}export default actions;

mutation.js

//vuex中的mutationconst mutations = {  increment: (state,n) => {    state.count += n;  }}export default mutations;

vue組件

methods: {  adda(){    //觸發action    this.$store.dispatch('increment',5);  }}

對象風格

action.js

//vuex中的actionconst actions = {  decrementa(context,payload){    context.commit('decrementa',payload);  }}export default actions;

mutation.js

//vuex中的mutationconst mutations = {  decrementa: (state,payload) => {    state.count -= payload.amount;  }}export default mutations;

vue組件

methods: {  reduceb(){    this.$store.dispatch({      type: 'decrementa',      amount: 5    });  }}

action的異步操作

突然就想總結一下action的異步操作。。。。

返回promise

action.js

//vuex中的actionconst actions = {  asyncMul(context,payload){    //返回promise給觸發的store.dispatch    return new Promise((resolve,reject) => {      setTimeout(() => {        context.commit('multiplication',payload);        resolve("async over");      },2000);    });  }}export default actions;

mutation.js

//vuex中的mutationconst mutations = {  multiplication(state,payload){    state.count *= payload.amount;  }}export default mutations;