[Vue]Vuexのstoreオプションを使う場合は必ずuseの指定が必要

  • 更新日:
  • 公開日:

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

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

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone