Because We Love Happy Coding

フリーライターがPHPとかJavaとか勉強してます

Vuexでgettersの挙動が納得できずハマった

Vue.js と Vuex を使っていて、ちょっとハマったので書いておきたい。初心者的なことなんですけど。

定義側 module Hoge

const getters = {
  foo : state => state.foo
}

呼び出し側

this.$store.getters.foo;// this.$store.getters.Hoge.fooは不可

store(state)の中にmodule Hogeを定義してその中にfooというデータを配している。

this.$store.getters.Hoge.fooで呼び出すかと思いきや、this.$store.getters.fooが正しい。

えー、なんで、と思ったけれど、よくよくドキュメントを調べたら書いてあった。

モジュール内で定義されたstateは、ローカルステート(モジュール)を参照する。そのため、module Hogeの記述でstate.fooを定義した段階で、これはHoge.fooを意味している。

じゃあ呼び出し側はfooだけでいいのかよ、Hoge.fooにしないとマズイんじゃ……と思うとさにあらず。gettersに登録されたfooは、Vuex全体に「公開される」という言い方をしている。つまり、gettersに登録するときに、他とカブっちゃいけないってことだ、たぶん。

カブった場合どうなるんだろう? 試していない。

まとめ。

  • module内のstateはローカルステートを指す
  • gettersに登録されたものはグローバルに公開される

だから、getters にあるfooにアクセスしさえすれば、Hoge.fooを探してきてくれる、というわけだ。

まあ答え先にわかっちゃうと当たり前のような気もするんだけど、ずいぶん悩んだ。

参考URL

https://vuex.vuejs.org/ja/api.htmlvuex.vuejs.org

https://vuex.vuejs.org/ja/getters.htmlvuex.vuejs.org