Webpack HMR 如何与 Vuex 模块交互?

Question

我正在使用Webpack，它是 Hot Module Replacement (HMR( 功能和Vuex在 Vue.js 应用程序中。荷载顺序如下：

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

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

HMR 如何与 Vuex 交互，为什么会发生这种情况？

Answer 1

我遇到了同样的问题。这是一个棘手的话题。看起来你需要特别告诉 Vuex 哪些模块需要热重载。我还没有一个好的解决方案，但看看 Vuex 文档，用于热重载 Vuex 模块。该解决方案使用 Webpack 的热重载 API。

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