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
名前空間（2018-02-07(水)追記）
コメントにて、namespaceを設定すればHoge.fooで記述することもできると教えて頂きました。 成ル程これは不勉強でした。公式ドキュメントの対応箇所は以下です。
ありがとうございます。
