electron+vueで自動作成したアプリのstore参照

Question

node.js、electron、vue、vue-cli をインストール後以下のコマンドでプロジェクトを自動作成します。
vue init simulatedgreg/electron-vue my-project
出来上がったプロジェクトは store がデフォルトで作成されていますが、この内容（Counter.jsのmainの値）をmain.jsで参照す るにはどのようにしたら良いのでしょうか？
以下の★のところでエラーが発生してしまいます。
main.js 以外はデフォルトのコードのままです。
最終的にはmain.js以外からも参照したいのですがとりあえずmain.jsからと思い色々試しています。

src/renderer/main.js

import store from './store'
//　・・・中略・・・
// 元は無かったコード(begin)
var ap = 
// 元は無かったコード(end)
new Vue({
  components: { App },
  router,
  store,
  template: '<App/>'
}).$mount('#app')

// 元は無かったコード(begin)
console.log('ap=' + ap.$store)
for (var item in ap.$store.modules) { console.log(item) }
console.log('ap=' + ap.$store.modules.Counter.state) // ★
// ここでエラー：
// Uncaught TypeError: Cannot read property 'Counter' of undefined
// 元は無かったコード(end)

src/renderer/store/index.jp

import Vue from 'vue'
import Vuex from 'vuex'

import modules from './modules'

Vue.use(Vuex)

export default new Vuex.Store({
  modules,
  strict: process.env.NODE_ENV !== 'production'
})

src/renderer/store/modules/index.js

const files = require.context('.', false, /.js$/)
const modules = {}

files.keys().forEach(key => {
  if (key === './index.js') return
  modules[key.replace(/(./|.js)/g, '')] = files(key).default
})

export default modules

src/renderer/store/modules/Counter.js

const state = {
  main: 0
}

const mutations = {
  DECREMENT_MAIN_COUNTER (state) {
    state.main--
  },
  INCREMENT_MAIN_COUNTER (state) {
    state.main++
  }
}

const actions = {
  someAsyncTask ({ commit }) {
    // do something async
    commit('INCREMENT_MAIN_COUNTER')
  }
}

export default {
  state,
  mutations,
  actions
}

Answer 1

Vuexのstoreのmoduleを使った場合、
モジュール内のstateには、store.state.モジュール名.アクセスしたいプロパティ名でアクセス出来ます。
今回の場合では、ap.$store.state.Counter.mainとなるかと思います。
https://vuex.vuejs.org/ja/modules.html

モジュール名は、Storeの初期化を行う時に渡されるmodulesオブジェクトによって決まります。
今回は、src/renderer/store/modules/index.jsが、
src/renderer/store/modulesディレクトリ配下の全てのスクリプト(.jsファイル)を読み込み、
各スクリプトのファイル名から.jsだけ取り除いてモジュール名として設定しているので、
上記のように、Counterというモジュール名でアクセス出来るようになっています。

Comments

[menshan]

ご回答ありがとうございます。教えて頂いた「store.state.モジュール名.アクセスしたいプロパティ名」でアクセスできました。

一歩進んで main.js 以外の別ソースから
console.log('store=' + this.$store)
と参照していますが undefined で参照できません。

どのサイトを見ても this.$store で参照可能とあるのですが、何か不足しているコードがあるのでしょうか？

[syumai]

Vuexでthis.$storeが呼べるようになるのは、storeの注入されたVueインスタンスの中からだけです。
例えば、子コンポーネントの`computed`や、`methods`の中からは呼ぶことが出来ます。
コンポーネントの宣言の外で使いたい場合は、先ほどのようにVueインスタンスを変数に代入して、`ap.$store.state ...`と言った形で呼ぶ必要があります。
https://vuex.vuejs.org/ja/state.html

Vuexに関しては、素晴らしい日本語の公式ドキュメントがありますので、他のサイトをご覧になる前にぜひ読んでみてください。
https://vuex.vuejs.org/ja/

[menshan]

ご丁寧な回答ありがとうございます。
確かにおっしゃるとおり xxx.vue の先頭とかで console.log('store=' + this.$store) と参照しても this.$store がまだ出来ていないらしく参照できませんでした。
いろいろ調べると router で画面遷移するタイプのアプリだとこの this.$store がまだ出来ていない現象が起こる様です。

回避策として vuex-router-sync というモジュールがありこれを使うと vue ファイル内で
カウンタ={{this.$store.state.Counter.main}}
の様に参照しても大丈夫でした。

具体的な方法としては、コンソール上で
npm install vuex-router-sync
でモジュールをインストール後 main.js に以下の３行を追加するだけです。

−−−−−−−−−−−−−−−−−−−−
import Vue from 'vue'
import axios from 'axios'
import App from './App'
import router from './router'
import store from './store'
// 追加(begin)
import { sync } from 'vuex-router-sync'
const unsync = sync(store, router)
unsync()
// 追加(end)
if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
・・・以下省略・・・

[syumai]

なるほど、vue-routerに起因する問題だったのですね！補足いただきありがとうございます。