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

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

ただいまの
回答率

88.77%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 1,371

nanairo24

score 6

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にしてもエラーは変わりませんでした

// 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,
}
// 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でデバッグをしています

  "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ページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

check解決した方法

0

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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