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 }
他に解決するにあたって書くべきものがあれば指摘していただきたいです
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。