タイトルで終わってしまう内容ですが、勉強中なのでメモ。
Vueの単一ファイルコンポーネントでVuexを参照する場合はルートコンポーネントにstoreオプションを指定します。
このオプションを指定する場合は、エントリーポイントでVue.use(Vuex);
の1行を記述しないと参照時エラーになるので注意です。
Vuexのuse指定コード例
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
text: 'Hello World'
},
mutations: {
setText(state, text) {
state.text= text;
}
},
getters: {
text(state){
return state.text;
}
}
});
new Vue({
store,
el: '#app',
template: '<App/>',
components: { App }
});
エントリーポイントの24行目、ルートコンポーネントで「store」オプションを指定してます。この場合子コンポーネントでthis.$store.text;
などでストアを参照する場合、5行目のようにuseでVuexを指定する必要があります。
参考:ステート · Vuex