2017-09-01 5 views
3

からこの質問は、Vueの約WebPACKのとES6 importについておそらくもっとあります。インポートVueの異なるファイルに「VUE」輸入「違う」Vueの

私はstateのオブジェクトに新しいmykey: []を追加するVuex突然変異を書いています。これはVue.set(state.myobj, 'mykey', [])を使用する必要があるため、新しい配列は反応性を得ることができます。

しかし、をmutations.jsにしてVue.set(...)を使用しても問題は解決しません(何もしません)。問題は、Vueが、私のmain.jsファイルにVueオブジェクトを作成するときにメインのjsファイルで使用するのと同じではないと思われます。

私はこの問題は、Vueのはmutations.jsにインポートされる方法に関連していることを確認しました。 main.jsにwindow.MY_VUE = Vueと書き込んでmutations.jsにwindow.MY_VUE.set(...)を書き込むと、新しい配列は期待通りに機能します。つまり、配列にプッシュすると、その変更はDOMに正しく反映されます。もちろん、mutations.jsのwindow.MY_VUE === Vueを比較するとfalseが返されます。

私が何か間違ったことをやっていますか?問題を解決する正しい方法は何でしょうか?

NB:回避策として、私は今、オブジェクトを置換:

state.myobj = { ...state.myobj, mykey: [] } 

私はVueの2.4.2、2.4.0 VuexとWebPACKの2.7.0を使用しています。私はWebpackコード分割を使用していません。

答えて

4

私は即時原因を発見しました。私はまず、アプリをロードするときに「あなたは開発モードでVueを実行しています」と気付きました。コンソールにを2回、と印刷しました。彼らはvue.runtime.esm.js:7417の両方でしたが、異なるURLから配信されました。私は(./../../で)2つのnode_modulesのディレクトリを持っていた気づいた(WebPACKのURLは、私は。npm run devを実行していたので)、そして何らかの理由でVueが両方の場所から、一度ロードされました。おそらく、何とかnpmパッケージを間違った順序でインストールしたでしょう。問題が解決両方node_modulesのdirsを削除して、再度npm installを実行している:今、私はmutations.jsでimport Vue from 'vue'、およびVue.set(...)作品を期待することができますよう。

とにかく、私はまだ実際のNPMの問題やどのように再びそれをしないのを正確に認識していませんよ。ここでは、オフトピックの質問を尋ねるため

+0

sorrry ...しかし、あなたは多分IDEは、VUEのための最高のサポートを提供している私に言うことができますか?私はノーマル角度の開発者です。私はちょうどvueで始まりました – Atlas

+0

@Atlas Vetur拡張機能を持つVSCodeが好きです – Desquid

関連する問題