vueコンポーネント内でactionsのレスポンスを取得する方式


最近は勉強にvuexを使って、vuex集中管理状態を利用したいです。バックグラウンドとデータをやりとりする時、必ずインターフェースの呼び出しに関連します。このような非同期操作は、通常actionの中に書きます。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use('Vuex');

const actions = {
 getComplete ({}) {
  return new Promise((resolve, reject) => {        
    Vue.http.get('XXXXXX').then((response) => {
      resolve(response);
     }).catch((response) => {
      reject(response);
     });
    });
  }
 }

export default new Vuex.Store({
 actions
})
ここでインターフェースの要求をpromiseに置いて、プロミス非同期の特性を利用して、インターフェース呼び出しが成功した後に戻るパラメータをサブコンポーネントに取得することができる。

export default {
  ......
  created: function() {
    this.$store.dispatch('getComplete').then(response => {
      ......
    }).catch(response => {
      ......
    })
  }
}
このような方法以外にも、コンポーネントのmethodsを、mapActions補助関数を使用して、store.dispatch呼び出しにマッピングしてもよい(ルートノードにstoreを注入する必要がある)。
転送ゲート:https://vuex.vuejs.org/en/actions.html
以上のこのvueコンポーネントの中でactionsのreponse方式を獲得するのは小編纂で皆さんに全部の内容を共有しました。参考にしてもらいたいです。どうぞよろしくお願いします。