Vuex actions?異步操作方法詳解

更新時間：2023年10月02日 09:49:20 投稿：wdc

這篇文章主要介紹了Vuex actions?異步操作方法,需要的朋友可以參考下

作用：異步操作寫在actions中，自身無法修改state中的數(shù)據(jù)，只能提交方法給mutations，通過mutations修改state中的數(shù)據(jù)

需要通過dispatch提交異步
actions中接收異步，內(nèi)部有一個參數(shù)context相當于store，可以通過context.commit提交同步
mutations中接收同步，在對state中的數(shù)據(jù)進行修改

// state中定義一些初始數(shù)據(jù)用來舉例
state: {
  // 定義一個數(shù)字
  count: 0,
  // 定義一個對象
  coderyg: {
    name: 'coderyg',
    age: 25,
    height: 1.93
  },
  // 定義一個字符串
  info: 'swk'
}

實例1：普通用法(需求：3s后修改info為zbj)

// App.vue
<p>{{ $store.state.info }}</p>  //此時info是swk
<button @click="update">3s后修改info</button>
// dispatch提交異步
update() {
  this.$store.dispatch('aUpdate');
}
// index.js
// actions接收異步
actions: {
  // 這里的context可以當作store，通過context.commit提交同步
  aUpdate(context) {
    setTimeout(() => {
      // 提交同步
      context.commit('mUpdate');
    }, 3000)
  }
},
// mutations接收同步
mutations: {
  mUpdate(state) {
    state.info = 'zbj'
  }
}

實例2.1：直接提交一個大對象攜帶數(shù)據(jù)

// App.vue
<p>{{ $store.state.info }}</p>  //此時info是swk
<button @click="update('zbj')">3s后修改info</button>
// dispatch提交異步
update(info) {
  this.$store.dispatch(這里開始{
    type: 'aUpdate',
    info
  }這里結(jié)束是payload);
}
// index.js
// actions接收異步，傳遞過來的payload作為接收的第二個參數(shù)
actions: {
  aUpdate(context, payload) {
    setTimeout(() => {
      // context.commit提交同步
      context.commit('mUpdate', payload);
      console.log(payload);
    }, 3000)
  }
}
// mutations接收同步
mutations: {
  mUpdate(state, payload) {
    state.info = payload.info;
  }
}

實例2.2普通提交后面攜帶多個參數(shù)

// App.vue
update() {
  // 提交異步
  this.$store.dispatch('aUpdate', 從這開始{
    message: 'hello vuejs',
    success: () => {
      console.log('提交成功');
    }
  }到這結(jié)束是payload)
}
// index.js
actions: {
  // 接收異步
  aUpdate(context, payload) {
    setTimeout(() => {
      // 提交同步
      context.commit('mUpdate', payload);
    }, 3000)
  }
},
mutations: {
  // 接收同步
  mUpdate(state, payload) {
    // 修改數(shù)據(jù)
    state.info = payload.message;
    // 調(diào)用方法
    payload.success();
  }
}

實例2.3通過Promise優(yōu)雅提交

使用dispatch提交異步時，接收異步請求使用Promise，當在Promise內(nèi)部調(diào)用resolve()方法，則可以在dispatch后跟上then()方法

// App.vue
update() {
  // 提交異步
  this.$store
    .dispatch('aUpdate', 從這開始{
      message: 'hello vuejs',
      success: () => {
        console.log('success');
      }
    }到這結(jié)束是payload)
    // 這里調(diào)用.then
    .then(res => console.log(res))
}
// index.js
actions: {
  // 接收異步
  aUpdate(context, payload) {
    // 直接return Promise
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        // 提交同步
        context.commit('mUpdate', payload);
        // 調(diào)用方法測試
        payload.success();
        // 調(diào)用resolve
        resolve('res');
      }, 3000)
    });
  }
},
mutations: {
  // 接收同步
  mUpdate(state, payload) {
    state.info = payload.message;
  }
}

到此這篇關(guān)于Vuex actions：異步操作詳解的文章就介紹到這了,更多相關(guān)Vuex actions：異步操作詳解內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: