webpack - Webpack HMR 如何与 Vuex 模块交互？

Question

我正在使用Webpack，它是热模块替换 ( HMR ) 功能和Vue.js应用程序中的 Vuex。加载顺序如下：

1. 用户点击消息中的共享链接 - 启动加载 UI 并点击 API 获取某些内容
2. 内容返回 - 初始化根的 Vuex 子模块，让我们调用它subA
3. 初始化后 - 将 UI 转换到另一个页面，并subA使用 getter 显示一些数据。

这在正常情况下每次都有效，但是当我进行文件更改、保存它们（触发 HMR）时，Vuex 子模块subA似乎被重置了——它的所有属性state都设置为初始值。

HMR 如何与 Vuex 交互，为什么会这样？

Answer 1

我遇到了同样的问题。这是一个棘手的主题……看起来您需要专门告诉 Vuex 哪些模块需要热重载。我还没有一个好的解决方案，但请查看 Vuex 文档以了解热重载 Vuex 模块。该解决方案使用 Webpack 的热重载 API。

https://vuex.vuejs.org/guide/hot-reload.html