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

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

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

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

Vuex

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

Q&A

解決済

1回答

344閲覧

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

nanairo24

総合スコア6

Electron

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

Vuex

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

0グッド

1クリップ

投稿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

1// store/modules/params.js 2const state = { 3 test: null, 4} 5 6const mutations = { 7 SetTest(state, value) { 8 state.test = value 9 }, 10} 11 12const actions = { 13 SetTest({ commit }, value) { 14 commit('SetTest', value) 15 }, 16} 17 18export default { 19 namespaced: true, 20 state, 21 mutations, 22 actions, 23}

Vue

1// components/Test.vue 2<template> 3 <input 4 type="button" 5 @click="testFunc" 6 /> 7</template> 8 9<script> 10import fs from 'fs-extra' 11import path from 'path' 12 13export default { 14 methods: { 15 testFimc() { 16 const self = this 17 const dir = '<実際のディレクトリー>' 18 fs.readdir(dir, function(err, files) { 19 if(err) throw err 20 const _list = files.filter((f) => fs.statSync(path.join(dir, f)).isFile() && /.(png|jpg)$/.test(f)) 21 .sort((a, b) => (fs.statSync(path.join(dir, b)).mtime.getTime() - fs.statSync(path.join(dir, a)).mtime.getTime())) 22 if(_list.length) 23 self.$store.dispatch('params/SetTest', path.join(dir, _list[0])) 24 }) 25 }, 26 }, 27} 28</script>

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

JSON

1 "dependencies": { 2 "axios": "^0.18.0", 3 "dateformat": "^3.0.3", 4 "electron-root-path": "^1.0.9", 5 "electron-window-state": "^5.0.3", 6 "vue": "^2.5.16", 7 "vue-electron": "^1.0.6", 8 "vue-router": "^3.0.1", 9 "vuex": "^3.0.1", 10 "vuex-electron": "^1.0.0" 11 }, 12 "devDependencies": { 13 "ajv": "^6.5.0", 14 "babel-core": "^6.26.3", 15 "babel-eslint": "^8.2.3", 16 "babel-loader": "^7.1.4", 17 "babel-plugin-istanbul": "^4.1.6", 18 "babel-plugin-transform-runtime": "^6.23.0", 19 "babel-preset-env": "^1.7.0", 20 "babel-preset-stage-0": "^6.24.1", 21 "babel-register": "^6.26.0", 22 "babili-webpack-plugin": "^0.1.2", 23 "cfonts": "^2.1.2", 24 "chai": "^4.1.2", 25 "chalk": "^2.4.1", 26 "copy-webpack-plugin": "^4.5.1", 27 "cross-env": "^5.1.6", 28 "css-loader": "^0.28.11", 29 "del": "^3.0.0", 30 "devtron": "^1.4.0", 31 "electron": "3.1.8", 32 "electron-builder": "^20.19.2", 33 "electron-debug": "^1.5.0", 34 "electron-devtools-installer": "^2.2.4", 35 "eslint": "^5.15.3", 36 "eslint-friendly-formatter": "^4.0.1", 37 "eslint-loader": "^2.0.0", 38 "eslint-plugin-html": "^4.0.3", 39 "eslint-plugin-vue": "^5.2.2", 40 "file-loader": "^1.1.11", 41 "html-webpack-plugin": "^3.2.0", 42 "inject-loader": "^4.0.1", 43 "karma": "^2.0.2", 44 "karma-chai": "^0.1.0", 45 "karma-coverage": "^1.1.2", 46 "karma-electron": "^6.0.0", 47 "karma-mocha": "^1.3.0", 48 "karma-sourcemap-loader": "^0.3.7", 49 "karma-spec-reporter": "^0.0.32", 50 "karma-webpack": "^3.0.0", 51 "mini-css-extract-plugin": "0.4.0", 52 "mocha": "^5.2.0", 53 "multispinner": "^0.2.1", 54 "node-loader": "^0.6.0", 55 "node-sass": "^4.9.2", 56 "require-dir": "^1.0.0", 57 "sass-loader": "^7.0.3", 58 "spectron": "^3.8.0", 59 "style-loader": "^0.21.0", 60 "url-loader": "^1.0.1", 61 "vue-html-loader": "^1.2.4", 62 "vue-loader": "^15.2.4", 63 "vue-style-loader": "^4.1.0", 64 "vue-template-compiler": "^2.5.16", 65 "webpack": "^4.15.1", 66 "webpack-cli": "^3.0.8", 67 "webpack-dev-server": "^3.1.4", 68 "webpack-hot-middleware": "^2.22.2", 69 "webpack-merge": "^4.1.3" 70 }

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

おそらく解決しました
Vuexにエレメントなどの複雑なObjectを代入するとエラーを吐くのだと思います

これにて質問は閉じますが、もしこの解釈が誤りであるなどの情報があればコメントお願いします

投稿2019/04/04 13:27

nanairo24

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問