質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.26%

  • Node.js

    1289questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • Vue.js

    233questions

  • Electron

    153questions

    Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

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

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 61

menshan

score 34

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
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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というモジュール名でアクセス出来るようになっています。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/08 14:01

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

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

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

    キャンセル

  • 2018/01/08 14:34

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

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

    キャンセル

  • 2018/01/08 19:09

    ご丁寧な回答ありがとうございます。
    確かにおっしゃるとおり 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 に以下の3行を追加するだけです。

    −−−−−−−−−−−−−−−−−−−−
    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'))
    ・・・以下省略・・・

    キャンセル

  • 2018/01/08 23:12

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.26%

関連した質問

  • 解決済

    javascriptの非同期処理、promiseについて

    概要 現在、javascriptとelectronを用いて、メモ帳アプリのようなものを作っています。 データベースへのアクセスに伴う非同期処理について、promiseの使い方が

  • 解決済

    【JavaScript】indexOfで特定文字が反応しない

    JavaScriptのindexOfメソッドで、文章の検索を実行しているのですが、 何故か「よという文字だけが反応しません。 「あや「漢、「alphaなどはしっかりと開始位

  • 解決済

    Electronアプリが異常終了します

    Mac上のElectronでアプリケーションを作って実行していると、数分でトレイアイコンが消えるなどの異常が見られ、コンテキストメニューから項目を選ぶとクラッシュします。 クラッ

  • 受付中

    【Electron】指定DIVをPDFで出力したい

     質問 Electronで、指定部分(例えばDIV)をPDFにして出力する機能を付けたいのですが、 うまくいきません。 jsPDF.jsと言うものを使ってみたのですが、ど

  • 受付中

    Electronが実行できない

    前提・実現したいこと Electronを使用してアプリケーションを作成しています 発生している問題・エラーメッセージ main\.js:9 app\.on\('windo

  • 解決済

    electron getElementsByClassNameにアクセス

    electronでmysqlのデータをtableタグに一覧を表示するアプリを作成しています。 tableタグに表示したIDをクリックしてそのIDに関する情報を別のウインドウに表示

  • 解決済

    Node.jsから実行中のアプリケーションを取得する

    前提・実現したいこと Electronから、他のアプリケーション実行元のディレクトリを取得したいです 調べたこと かなり調べたのですが、実行中のプロセスを取得するには VBSc

  • 解決済

    canvasのtoDataURLが想定している内容を返さない

    前提・実現したいこと electronでローカルファイルを複数のcanvasに分けて表示し、あとからcanvasを結合してpng形式でダウンロードする処理を書いています 発生し

同じタグがついた質問を見る

  • Node.js

    1289questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • Vue.js

    233questions

  • Electron

    153questions

    Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。