JavaScript
vue.js
Vuex

Vue.jsでthis.$storeにアクセスできない書き方


環境


  • Vue.2.5.1

  • Vuex 3.0.1


this.$store→undefinedエラー

this.$store.getters['auth']

のように $store を使おうとすると下記のエラーが出た。

Error in created hook: "TypeError: Cannot read property '$store' of undefined"


原因

イキってアロー関数を使ったから。

created: () => {

this.$store.getters['auth'] // "TypeError: Cannot read property '$store' of undefined"
console.log(this.$store) // "TypeError: Cannot read property '$store' of undefined"
console.log(this) // undefined
}

そもそも this がundefined。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions


アロー関数式 は、その名のとおり矢印を使って記述し、function 式より短い構文で同様な内容を記述することができます。なおthis, arguments, super, new.target を束縛しません。


つまり「thisが空ということが有り得る」という捉え方で良いのかな。

試しに下記のようなオブジェクトで実験してみた。

const obj = {

func1: function() {
console.log(this); // {func1: f, func2: f, func3: f}
},
func2() {
console.log(this); // {func1: f, func2: f, func3: f}
},
func3: () => {
console.log(this); // undefined
}
};

func1とfunc2ではthisでオブジェクト自身が取得できている。


結論

created: function() {

console.log(this)
}

もしくは

created() {

console.log(this)
}

のように書くと VueComponent {_uid: 7, _isVue: true, $options: {…}, とコンポーネント自身が取得できているのが確認できた。