参考コード

action をコンポーンネントから実行する

  • this.$store.dispatch("search/doSearch", keyword);
  • 引数として input の値を投げている
/components/search.vue
<script>
export default {
  methods: {
    change(e) {
      // console.log(e.target.value);
      const keyword = e.target.value;
      this.$store.dispatch("search/doSearch", keyword);
    }
  }
};
</script>

action => 検索 => mutation => 結果を state に反映させる

  • doSearch action を実行すると、仮に検索結果を受け取って、それを元に mutation を実行する
  • mutation は state の result を変更する
/store/search/index.js
const state = {
  results: []
};

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

const actions = {
  doSearch({ commit }, keyword) {
    console.log(keyword);

    // 検索したとする
    const results = ["piano", "bass", "drum"];
    commit("setResults", results);
  }
};

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

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

export default search;