进口Vue从'vue'进口“不同”Vue到不同的文件

Question

这个问题可能更多关于Webpack和ES6 import比关于Vue。

我在写一个Vuex突变，它将一个新的mykey: []添加到state中的一个对象中。这需要使用Vue.set(state.myobj, 'mykey', [])，以便新阵列获得反应性。

但是，当我import Vue from 'vue'到我的mutations.js和使用Vue.set(...)它不能解决问题（它什么都不做）。这个问题似乎是Vue是不一样的Vue，我在我的main.js文件中创建Vue对象时，我在我的主要js文件中使用。

我已验证问题与Vue导入到mutations.js的方式有关。如果我在main.js中编写window.MY_VUE = Vue，然后在mutations.js中使用window.MY_VUE.set(...)，则新数组按照预期工作，即当我推送到数组时，这些更改正确地反映在DOM中。自然地，比较window.MY_VUE === Vue在mutations.js中返回false。

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

注意：作为一种变通方法，我现在替换对象：

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

我使用Vue的2.4.2，2.4.0 Vuex和的WebPack 2.7.0。我没有使用Webpack代码分割。

Answer 1

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

无论如何，我仍然没有完全意识到实际的NPM问题或如何不再做。