从'vue'导入Vue将"不同的"Vue导入到不同的文件中

Question

这个问题可能更多是关于Webpack和ES6而import不是关于Vue.

我正在编写一个Vuex变异,mykey: []为一个对象添加一个新的state.这需要使用Vue.set(state.myobj, 'mykey', []),以便新阵列获得反应性.

但是,当我import Vue from 'vue'对我的mutation.js和使用Vue.set(...)它并没有解决问题(它什么都不做).问题似乎Vue与Vue我在main.js文件中创建Vue对象时在主js文件中使用的问题不同.

我已经证实问题与Vue导入mutation.js的方式有关.如果我window.MY_VUE = Vue在main.js中写入然后window.MY_VUE.set(...)在mutation.js中使用,则新数组按预期工作,即当我推送到数组时,更改会在DOM中正确反映.当然,window.MY_VUE === Vue在mutation.js中进行比较会返回false.

难道我做错了什么？解决问题的正确方法是什么？

注意:作为一种解决方法,我现在替换该对象:

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

我正在使用Vue 2.4.2,Vuex 2.4.0和Webpack 2.7.0.我没有使用Webpack代码分割.

Answer 1

我找到了直接的原因.我首先注意到,在加载应用程序时,"您正在开发模式下运行Vue".在控制台中打印了两次.他们都来自vue.runtime.esm.js:7417,但是来自不同的网址.(Webpack网址,因为我正在运行npm run dev.)我注意到我有两个node_modules目录(at ./和../../),并且出于某种原因Vue从两个地方加载了一次.可能是我以错误的顺序安装了npm软件包.删除两个node_modules目录并npm install再次运行解决了问题:现在我可以import Vue from 'vue'在mutation.js中,并按Vue.set(...)预期工作.

无论如何,我仍然没有完全知道实际的npm问题或如何不再这样做.