2017-09-01 2 views
3

Diese Frage ist wahrscheinlich mehr über Webpack und ES6 import als über Vue.importieren Vue von 'vue' importiert "verschiedene" Vue zu verschiedenen Dateien

Ich schreibe eine Vuex-Mutation, die ein neues mykey: [] zu einem Objekt in state hinzufügt. Dies muss verwenden, damit das neue Array reaktiv wird.

Allerdings, wenn ich import Vue from 'vue' zu meinem mutations.js und Vue.set(...) verwenden, behebt es das Problem nicht (es tut einfach nichts). Das Problem scheint zu sein, dass Vue nicht das gleiche Vue ist, das ich in meiner Hauptjs-Datei verwende, wenn ich das Vue-Objekt in meiner main.js-Datei erstelle.

Ich habe überprüft, dass das Problem damit zusammenhängt, wie Vue in mutations.js importiert wird. Wenn ich in main.js window.MY_VUE = Vue schreibe und dann in mutations.js window.MY_VUE.set(...) verwende, funktioniert das neue Array wie erwartet, d. H. Wenn ich zum Array drücke, werden die Änderungen korrekt in DOM widergespiegelt. Der Vergleich von window.MY_VUE === Vue in mutations.js ergibt natürlich false.

Mache ich etwas falsch? Was wäre der richtige Weg, um das Problem zu beheben?

NB: Als Abhilfe können ersetze ich jetzt das Objekt:

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

Ich bin mit Vue 2.4.2, 2.4.0 und Vuex Webpack 2.7.0. Ich verwende kein Webpack-Code-Splitting.

Antwort

4

Ich fand die sofortige Ursache. Ich habe zuerst festgestellt, dass beim Laden der App "Sie Vue im Entwicklungsmodus ausführen". wurde zweimal in der Konsole gedruckt. Sie waren beide von vue.runtime.esm.js: 7417, aber dienten von verschiedenen URLs. (Webpack-URLs, seit ich npm run dev lief.) Ich bemerkte, dass ich zwei node_modules Verzeichnisse hatte (um ./ und ../../), und aus irgendeinem Grund wurde Vue einmal von beiden Orten geladen. Wahrscheinlich hatte ich die npm-Pakete irgendwie in der falschen Reihenfolge installiert. Entfernen Sie beide node_modules Verzeichnisse und npm install wieder das Problem gelöst: Jetzt kann ich import Vue from 'vue' in mutations.js und Vue.set(...) funktioniert wie erwartet.

Wie auch immer, ich bin mir immer noch nicht genau der tatsächlichen npm Problem oder wie es nicht wieder tun.

+0

Bitte fragen Sie hier eine Frage zum Thema ... aber können Sie mir vielleicht sagen, welche IDE die beste Unterstützung für VUE bietet? Ich bin normalerweise ein eckiger Entwickler. und ich begann gerade mit vue – Atlas

+0

@Atlas Ich mag VSCode mit der Vetur-Erweiterung – Desquid