データの共有にはVuexを使用する（P304）
Vue.jsの名著【基礎から学ぶVue.js（通称：猫本）】のChapter9にある「データの共有にはVuexを使用する」の項目ではまってしまい、著者のmio様から直々にご教授いただきました内容の記録です。
いち読者のために、懇切丁寧にレクチャーしてくださったmio様に感謝です。
反省：vuexモジュールの使い方を理解できてなかった
ど素人なのに、何となく読み進めてしまったため、Chapter8のVuexの使い方をしっかり理解していないでただサポートページ「S52 ネストされた複雑なページを作成」だけを頼りに四苦八苦してました。
VueRouterで作るプロダクトでページ遷移が必要な場合、データの持ち回りにVuexが重宝されるためChapter8とChapter9はセットで確実に理解しなければいけませんでした。
ポイント：モジュールとストアルートのアプリケーションへの登録
Vuex と Vuex モジュールを使用するために書籍のサンプルコードに加えて次の手順が必要です。
- 「src/store/product.js」モジュールを「src/store.js」ファイルでストアルートに登録する（P.270～）
- 「src/store.js」のストアルートを「src/main.js」のアプリケーションに登録する（P.256）
コードの具体例
具体的には以下のコードの追記が必要です。
（書籍のサンプルコードで使われているディレクトリ構造を踏襲した場合）
Vuexモジュールをストアルートに登録（src/store.js）
import Vue from 'vue'
import Vuex from 'vuex'
import product from '@/store/product.js' // モジュールをストアルートに登録
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
product // モジュールをストアルートに登録
},
//...
})
ストアルートをアプリケーションに登録（src/main.js）
import Vue from 'vue'
import store from './store.js'
import App from "./App";
import router from './router.js'
new Vue({
el: '#app',
store, // アプリケーションに登録
router,
render: h => h(App)
// ...
})
まとめ
Vuexの章のあたりから理解があやしくなり、そのまま読み進めた結果変なところでつまづいてしまいました。
サポートページが懇切丁寧に説明されているため、しっかり理解せずにコピペで理解したつもりになってしまうと私と同じようなことになってしまうと思います。
あまりいないかもしれませんが、もし同じところでつまずいている方の助けになれば幸いです。
最後に、大変お忙しいところを私のようなど素人にも呆れずに大変丁寧なご対応をしてくださった著者のmio様に改めて感謝の意を表したいと思います。
ありがとうございました！