91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vuex中如何利用mutation或action傳參

發布時間:2022-04-21 17:28:12 來源:億速云 閱讀:768 作者:zzz 欄目:大數據

這篇文章主要介紹“vuex中如何利用mutation或action傳參”,在日常操作中,相信很多人在vuex中如何利用mutation或action傳參問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”vuex中如何利用mutation或action傳參”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!

前言

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

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

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

export default state;

mutation傳參

樸實無華的方式

mutation.js

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

export default mutations;

vue組件中(省去其他代碼)

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

對象風格提交參數

mutation.js

//vuex中的mutation
const 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中的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(){
    //觸發action
    this.$store.dispatch('increment',5);
  }
}

對象風格

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的異步操作

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

返回promise

action.js

//vuex中的action
const 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中的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);
    });
  }
}

在另外一個 action 中組合action

action.js

//vuex中的action
const actions = {
  asyncMul(context,payload){
    //返回promise給觸發的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函數

action.js

//vuex中的action
const actions = {
  asyncMul(context,payload){
    //返回promise給觸發的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(() => {
      ...
    });
  }
}

到此,關于“vuex中如何利用mutation或action傳參”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續學習更多相關知識,請繼續關注億速云網站,小編會繼續努力為大家帶來更多實用的文章!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

囊谦县| 皋兰县| 新邵县| 综艺| 五大连池市| 双柏县| 镇坪县| 兴山县| 洛浦县| 涿鹿县| 遂平县| 新余市| 威海市| 兴仁县| 临沧市| 正宁县| 同德县| 元氏县| 河池市| 九寨沟县| 泰兴市| 鄂伦春自治旗| 抚松县| 阜阳市| 来安县| 虞城县| 五华县| 安康市| 吉木萨尔县| 白朗县| 青铜峡市| 和平县| 永善县| 兴仁县| 建宁县| 墨竹工卡县| 遂平县| 浪卡子县| 新蔡县| 西贡区| 临西县|