Warning: Undefined array key 2 in /home/xs390735/increment-log.com/public_html/wp-content/themes/increment-log/functions.php on line 349

Warning: Undefined array key 4 in /home/xs390735/increment-log.com/public_html/wp-content/themes/increment-log/functions.php on line 354

Warning: Undefined array key 6 in /home/xs390735/increment-log.com/public_html/wp-content/themes/increment-log/functions.php on line 359

タイトルで終わってしまう内容ですが、勉強中なのでメモ。

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