亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

詳解vuex中mutation/action的傳參方式

 更新時(shí)間:2018年08月07日 14:19:53   作者:wopelo  
這篇文章主要介紹了詳解vuex中mutation/action的傳參方式,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

前言

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

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

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

export default state;

mutation傳參

樸實(shí)無華的方式

mutation.js

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

export default mutations;

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

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

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

mutation.js

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

export default mutations;

vue組件

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

action傳參

樸實(shí)無華

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);
  }
}

對象風(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(() => {
      ...
    });
  }
}

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue3:setup語法糖使用教程

    vue3:setup語法糖使用教程

    <script setup>是在單文件組件中使用Composition API的編譯時(shí)語法糖,下面這篇文章主要給大家介紹了關(guān)于vue3:setup語法糖使用的相關(guān)資料,需要的朋友可以參考下
    2022-08-08
  • vue引用public目錄下文件的方式詳解

    vue引用public目錄下文件的方式詳解

    由于一些演示需要對一些簡單頁面進(jìn)行配置,由于打包build后的vue項(xiàng)目基本已經(jīng)看不出原樣,因此需要?jiǎng)?chuàng)建一個(gè)文件,并在打包的時(shí)候不會進(jìn)行編譯,所以文件放在public,下面這篇文章主要給大家介紹了關(guān)于vue引用public目錄下文件的相關(guān)資料,需要的朋友可以參考下
    2022-08-08
  • vue開發(fā)利器之unplugin-auto-import的使用

    vue開發(fā)利器之unplugin-auto-import的使用

    unplugin-auto-import 解決了vue3-hook、vue-router、useVue等多個(gè)插件的自動導(dǎo)入,也支持自定義插件的自動導(dǎo)入,下面這篇文章主要給大家介紹了關(guān)于vue開發(fā)利器之unplugin-auto-import使用的相關(guān)資料,需要的朋友可以參考下
    2023-02-02
  • 淺談 vue 中的 watcher

    淺談 vue 中的 watcher

    這篇文章主要介紹了vue 中的 watcher的相關(guān)資料,需要的朋友可以參考下
    2017-12-12
  • vue3實(shí)現(xiàn)數(shù)字滾動特效實(shí)例詳解

    vue3實(shí)現(xiàn)數(shù)字滾動特效實(shí)例詳解

    這篇文章主要為大家介紹了vue3實(shí)現(xiàn)數(shù)字滾動特效實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • vue3 選中對話框時(shí)對話框右側(cè)出一個(gè)箭頭效果

    vue3 選中對話框時(shí)對話框右側(cè)出一個(gè)箭頭效果

    本文主要介紹了Vue3實(shí)現(xiàn)選中對話框帶箭頭效果的方法,首先通過后臺獲取數(shù)據(jù)進(jìn)行遍歷,利用ts代碼判斷選中下標(biāo)與循環(huán)游標(biāo)是否一致以改變樣式,感興趣的朋友一起看看吧
    2024-10-10
  • vue+element加入簽名效果(移動端可用)

    vue+element加入簽名效果(移動端可用)

    這篇文章主要介紹了vue+element加入簽名效果(移動端),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-06-06
  • 詳解Vue.js中.native修飾符

    詳解Vue.js中.native修飾符

    這篇文章主要介紹了Vue.js中.native修飾符,給普通的HTML標(biāo)簽監(jiān)聽一個(gè)事件,之后添加 .native 修飾符是不會起作用的。需要的朋友可以參考下
    2018-04-04
  • Vue.js中數(shù)據(jù)綁定的語法教程

    Vue.js中數(shù)據(jù)綁定的語法教程

    Vue框架很核心的功能就是雙向的數(shù)據(jù)綁定。下面這篇文章主要給大家介紹了關(guān)于Vue.js中數(shù)據(jù)綁定的語法教程,文中通過示例代碼介紹的非常詳細(xì),相信對大家具有一的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。
    2017-06-06
  • Vue3中Hooks函數(shù)的使用及封裝思想詳解

    Vue3中Hooks函數(shù)的使用及封裝思想詳解

    Vue?3中的Hooks函數(shù)是一種用于在組件中共享可復(fù)用邏輯的方式,簡單來說,就是將單獨(dú)功能的js代碼抽離出來,?加工成公共函數(shù),從而達(dá)到邏輯復(fù)用,下面小編就來和大家聊聊Hooks函數(shù)的使用及封裝思想吧
    2023-06-06

最新評論