参考コード

  • action の中では複数の commit ができる。これが実は直接 state を変更するのではなく、action => mutaiton => state の変更とわざわざする利点。
  • loading 用の state, getter, mutation を定義する
  • axios.get の直前で loading を false にする mutation を実行
  • データ取得が終わったら loading を true にする mutation を実行
/store/search/index.js
import axios from "axios";

const state = {
  results: [],
  loading: false
};

const getters = {
  results(state) {
    return state.results;
  },
  loading(state) {
    return state.loading;
  }
};

const actions = {
  async doSearch({ commit }, keyword) {
    commit("setLoading", true);
    const results = await axios.get("https://api.myjson.com/bins/uvkns");
    commit("setLoading", false);
    const { data } = results;
    commit("setResults", data.results);
  }
};

const mutations = {
  setResults(state, results) {
    state.results = results;
  },
  setLoading(state, bool) {
    state.loading = bool;
  }
};

const search = {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
};

export default search;