javascript - import Vue from 'vue' 将 "different"Vue 导入不同的文件

Question

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

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

但是，当我将 Vue 从 '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(...)，新数组将按预期工作，即当我推送到数组时，更改会正确反射(reflect)在 DOM 中。自然地，在 mutations.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，但来自不同的 url。 (Webpack url，因为我正在运行 npm run dev。)我注意到我有两个 node_modules 目录(在 ./ 和 . ./../)，并且出于某种原因，Vue 从两个地方加载了一次。可能我以错误的顺序安装了 npm 包。删除 node_modules 目录并再次运行 npm install 解决了问题:现在我可以在 mutations.js 中 import Vue from 'vue'，并且 Vue.set(...) 按预期工作。

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