import Vue from 'vue' imports "different" Vue 到不同的文件

Question

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

我正在编写一个 Vuex 突变，向 state 中的对象添加一个新的 mykey: []。这需要使用Vue.set(state.myobj, 'mykey', [])，使新数组获得反应性。

然而，当我 import Vue from 'vue' 到我的 mutations.js 并使用 Vue.set(...) 时，它并没有解决问题（它什么都不做）。问题似乎是 Vue 与我在 main.js 文件中创建 Vue 对象时在主 js 文件中使用的 Vue 不同。

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

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

注意：作为解决方法，我现在替换对象：

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

我正在使用 Vue 2.4.2、Vuex 2.4.0 和 Webpack 2.7.0。我没有使用 Webpack 代码拆分。

Answer 1

我找到了直接原因。我首先注意到，在加载应用程序时，"You are running Vue in development mode." 在控制台中打印了两次。它们都来自 vue.runtime.esm.js:7417，但来自不同的网址。（Webpack url，因为我是运行 npm run dev。）我注意到我有两个 node_modules 目录（在 ./ 和 ../../），并且出于某种原因 Vue从两个地方加载一次。可能我以错误的顺序安装了 npm 包。删除 node_modules 目录和运行 npm install 再次解决了问题：现在我可以 import Vue from 'vue' in mutations.js，并且 Vue.set(...) 按预期工作。

无论如何，我仍然不完全了解实际的 npm 问题或如何不再这样做。

import Vue from 'vue' imports "different" Vue 到不同的文件

import Vue from 'vue' imports "different" Vue to different files

javascript

npm

webpack-2

vuejs2