zukucode
主にWEB関連の情報を技術メモとして発信しています。
Vue.js

Vuex actionでローディングアイコンを表示する

Vuex actionの処理でaxiosでajaxを行うでactionの処理を実装しました。

actionでajaxを行うときにローディングアイコンを表示させます。

mutationの編集

Vuexのstoreにloadingの状態を持つようにします。また、mutationでloadingの状態を変更でするようにします。

mutation-types.js
export const SET_LOADING = 'SET_LOADING';
mutations.js
export const state = {
  loading: false
};

export const mutations = {
  [types.SET_LOADING] (state, isLoading) {
    state.loading = isLoading;
  }
};

コンポーネントの編集

コンポーネントでloadingがtrueのときだけロード中のメッセージを表示するようにします。

App.vue
<template>
  <div>
    <div v-if="loading">
      ロード中
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState({
      loading: 'loading'
    })
  }
};
</script>

actionの編集

actionの最初でloadingをtrueにするmutationを実行し、最後でloadingをfalseにするmutationを実行します。

webpack モジュールのパスを絶対パスで指定する方法で紹介した方法でImportは絶対パスで指定しています。

actions.js
import Vue from 'vue';
import * as types from 'js/store/mutation-types';

export const getUsers = ({ commit }) => {
  commit(types.SET_LOADING, true);
  Vue.http.get('json/users.json').then((response) => {
    commit(types.SET_LOADING, false);
    // 成功
    commit(types.SET_USER, response);
  }, (response) => {
    commit(types.SET_LOADING, false);
    // エラー処理
  });
};

axiosの共通処理に組み込む

規模が小さい場合は上記の方法でも問題ありませんが、ajax処理が増えるたびにloadingのmutationを組み込むのは手間なので、axiosの処理で共通化ができれば簡単になります。

Vuexとaxiosを連携するでその方法を紹介します。

Vue.js

関連記事