参考コード

まずは Vuex の設定をします。忘れている場合には Vuex を詳細に説明した章を参照してください。

上から見ていくと

  • main.js で store の設定を読み込む
  • store の設定は /store/index.js に書く
  • /store/index.js では使用する module を読み込んで、これを設定した store を作って出力する
  • 使用する module である search は /store/search/index.js に記述する
  • /store/search/index.js には state, およびそれを参照する getter を定義し、これを設定したオブジェクトを export する
main.js
import Vue from "vue";
import App from "./App.vue";
import store from "./store";

Vue.config.productionTip = false;

new Vue({
  store, // store を読み込む
  render: h => h(App)
}).$mount("#app");
/store/index.js
import Vue from "vue";
import Vuex from "vuex";

import search from "./search";

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    search // module を読み込む
  }
});

export default store;
/store/search/index.js
const state = {
  keyword: "test search keyword"
};

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

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

export default search;