从'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与我在main.js文件中创建Vue对象时在我的主js文件中使用的Vue不同。

我已经证实问题与Vue导入mutation.js的方式有关。如果我在main.js中编写window.MY_VUE = Vue然后在mutation.js中使用window.MY_VUE.set(...)，则新数组按预期工作，即当我推送到数组时，更改会在DOM中正确反映。当然，比较mutation.js中的window.MY_VUE === Vue会返回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目录（在./和../../），并且由于某种原因Vue从两个地方加载了一次。可能是我以错误的顺序安装了npm软件包。删除node_modules dirs和运行npm install再次解决了问题：现在我可以在mutation.js中使用import Vue from 'vue'，并且Vue.set(...)可以正常工作。

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