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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Electron

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

解決済

Vuexで値を代入しようとするとエラーを吐く

nanairo24
nanairo24

総合スコア0

Electron

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

1回答

0評価

1クリップ

8閲覧

投稿2019/04/02 13:45

electron-vueテンプレートを用いて開発しています
共通のデータをいくつかのコンポーネントで利用するためにVuexを用いて値の共有を試みましたが、this.$store.dispatch('<action名>', '<値>')を実行しようとしても以下のエラーが出て値を保存できません
直接commitで実行しても同様でした。
vue.esm.js?a026:1897 DOMException: Blocked a frame with origin "http://localhost:9080" from accessing a cross-origin frame.

また、createイベント時に即時実行する分にはエラー吐かれないが、コールバック関数中(不明)で実行すると異なる以下のエラーが吐かれます
vue.esm.js?a026:46 Uncaught RangeError: Maximum call stack size exceeded

以下にコードの一部を示します
あるディレクトリー内の最新の写真を取得しています、readdirをSyncにしてもエラーは変わりませんでした

JS

// store/modules/params.js const state = { test: null, } const mutations = { SetTest(state, value) { state.test = value }, } const actions = { SetTest({ commit }, value) { commit('SetTest', value) }, } export default { namespaced: true, state, mutations, actions, }

Vue

// components/Test.vue <template> <input type="button" @click="testFunc" /> </template> <script> import fs from 'fs-extra' import path from 'path' export default { methods: { testFimc() { const self = this const dir = '<実際のディレクトリー>' fs.readdir(dir, function(err, files) { if(err) throw err const _list = files.filter((f) => fs.statSync(path.join(dir, f)).isFile() && /\.(png|jpg)$/.test(f)) .sort((a, b) => (fs.statSync(path.join(dir, b)).mtime.getTime() - fs.statSync(path.join(dir, a)).mtime.getTime())) if(_list.length) self.$store.dispatch('params/SetTest', path.join(dir, _list[0])) }) }, }, } </script>

パッケージは以下のとおりです
テンプレートからの追加や、electronのアップデートなどをしてあります
yarn installで追加し、yarn run devでデバッグをしています

JSON

"dependencies": { "axios": "^0.18.0", "dateformat": "^3.0.3", "electron-root-path": "^1.0.9", "electron-window-state": "^5.0.3", "vue": "^2.5.16", "vue-electron": "^1.0.6", "vue-router": "^3.0.1", "vuex": "^3.0.1", "vuex-electron": "^1.0.0" }, "devDependencies": { "ajv": "^6.5.0", "babel-core": "^6.26.3", "babel-eslint": "^8.2.3", "babel-loader": "^7.1.4", "babel-plugin-istanbul": "^4.1.6", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.7.0", "babel-preset-stage-0": "^6.24.1", "babel-register": "^6.26.0", "babili-webpack-plugin": "^0.1.2", "cfonts": "^2.1.2", "chai": "^4.1.2", "chalk": "^2.4.1", "copy-webpack-plugin": "^4.5.1", "cross-env": "^5.1.6", "css-loader": "^0.28.11", "del": "^3.0.0", "devtron": "^1.4.0", "electron": "3.1.8", "electron-builder": "^20.19.2", "electron-debug": "^1.5.0", "electron-devtools-installer": "^2.2.4", "eslint": "^5.15.3", "eslint-friendly-formatter": "^4.0.1", "eslint-loader": "^2.0.0", "eslint-plugin-html": "^4.0.3", "eslint-plugin-vue": "^5.2.2", "file-loader": "^1.1.11", "html-webpack-plugin": "^3.2.0", "inject-loader": "^4.0.1", "karma": "^2.0.2", "karma-chai": "^0.1.0", "karma-coverage": "^1.1.2", "karma-electron": "^6.0.0", "karma-mocha": "^1.3.0", "karma-sourcemap-loader": "^0.3.7", "karma-spec-reporter": "^0.0.32", "karma-webpack": "^3.0.0", "mini-css-extract-plugin": "0.4.0", "mocha": "^5.2.0", "multispinner": "^0.2.1", "node-loader": "^0.6.0", "node-sass": "^4.9.2", "require-dir": "^1.0.0", "sass-loader": "^7.0.3", "spectron": "^3.8.0", "style-loader": "^0.21.0", "url-loader": "^1.0.1", "vue-html-loader": "^1.2.4", "vue-loader": "^15.2.4", "vue-style-loader": "^4.1.0", "vue-template-compiler": "^2.5.16", "webpack": "^4.15.1", "webpack-cli": "^3.0.8", "webpack-dev-server": "^3.1.4", "webpack-hot-middleware": "^2.22.2", "webpack-merge": "^4.1.3" }

他に解決するにあたって書くべきものがあれば指摘していただきたいです

良い質問の評価を上げる

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

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

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

気になる質問をクリップする

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

Electron

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。