vuex中怎么利用mutation或action傳參

這篇文章將為大家詳細(xì)講解有關(guān)vuex中怎么利用mutation或action傳參，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

前言

在vuex中提交 mutation 是更改狀態(tài)的唯一方法，并且這個(gè)過(guò)程是同步的，異步邏輯都應(yīng)該封裝到 action 里面。對(duì)于mutation/action，有一個(gè)常見的操作就是傳參，也就是官網(wǎng)上說(shuō)的“提交載荷”。

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

//vuex中的state
const state = {
  count: 0
}

export default state;

mutation傳參

樸實(shí)無(wú)華的方式

mutation.js

//vuex中的mutation
const mutations = {
  increment: (state,n) => {
    //n是從組件中傳來(lái)的參數(shù)
    state.count += n;
  }
}

export default mutations;

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

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

對(duì)象風(fēng)格提交參數(shù)

mutation.js

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

export default mutations;

vue組件

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

action傳參

樸實(shí)無(wú)華

action.js

/vuex中的action
const actions = {
  increment(context,args){
    context.commit('increment',args);
  }
}

export default actions;

mutation.js

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

export default mutations;

vue組件

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

對(duì)象風(fēng)格

action.js

//vuex中的action
const actions = {
  decrementa(context,payload){
    context.commit('decrementa',payload);
  }
}

export default actions;

mutation.js

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

export default mutations;

vue組件

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

action的異步操作

突然就想總結(jié)一下action的異步操作。。。。

返回promise

action.js

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

export default actions;

mutation.js

//vuex中的mutation
const mutations = {
  multiplication(state,payload){
    state.count *= payload.amount;
  }
}

export default mutations;

vue組件

methods: {
  asyncMul(){
    let amount = {
      type: 'asyncMul',
      amount: 5
    }
    this.$store.dispatch(amount).then((result) => {
      console.log(result);
    });
  }
}

在另外一個(gè) action 中組合action

action.js

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

export default actions;

mutation.js

//vuex中的mutation
const mutations = {
  multiplication(state,payload){
    state.count *= payload.amount;
  }
}

export default mutations;

vue組件

methods: {
  actiona(){
    let amount = {
      type: 'actiona',
      amount: 5
    }
    this.$store.dispatch(amount).then((result) => {
      console.log(result);
    });
  }
}

使用async函數(shù)

action.js

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

export default actions;

mutation.js

//vuex中的mutation
const mutations = {
  multiplication(state,payload){
    state.count *= payload.amount;
  }
}

export default mutations;

vue組件

methods: {
  actionb(){
    let amount = {
      type: 'actionb',
      amount: 5
    }
    this.$store.dispatch(amount).then(() => {
      ...
    });
  }
}

關(guān)于vuex中怎么利用mutation或action傳參就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。