热更新导致store里面的数据全部重置? 每次修改代码都要刷新页面才行

[carl-jin]

如一个store里面涉及到异步请求数据, 就那这个项目左侧的菜单导航来说, 里面有一些数据是动态加载上去的(不是在store里面写死的, 而是通过别的组件调用 action 或者 mutation, 生成的数据), 这些数据在热更新后全部都会丢失.

重现

比如说 store/modules/user.ts, 在这个文件中加一行打印代码

//  在这里打印以下
console.log('这个文件被执行了')

@Module({ namespaced: true, name: NAME, dynamic: true, store })
class User extends VuexModule {
  constructor(props) {
    super(props);
    //  在这里也加个打印
    console.log('我也被执行了')
  }

然后 刷新页面, 可以看到浏览器确实打印了这两行代码

重点

随便修改一个模板文件.
可以发现浏览器, 又再次打印了这两条信息,
这意味着, 这个store文件在HRM更新的时候, 被重置了?
这样的话, menu热更新后消失, 问题是不是这个导致的?

疑惑

我倒腾了一个下午没搞懂
我尝试使用vite 提供的handleHotUpdate钩子, 去过滤掉 store文件的HMR,但是没解决

奇怪的是, 如果我是直接在/store/index.ts/ 中的 createStore 方法中写的state, 就不会有这个问题

猜想

比如我的某个组件中, 使用了这个 store

  import { GrowthToolWidgetStore } from '/@/store/modules/growth-tool-widget';

这个组件热更新的时候, 会判断这个store是依赖, 然后又重新调用了一下. 导致动态的state数据全部丢失

[anncwb]

https://github.com/anncwb/vue-vben-admin/issues/347 跟这个一样. vite会把循环依赖的内容置空,已经给vite提issue,看他们有没有好的办法解决

[carl-jin]

#347 跟这个一样. vite会把循环依赖的内容置空,已经给vite提issue,看他们有没有好的办法解决

vitejs/vite#2308 我去vite issue里面看了下, 作者提的不是已经关了吗 vitejs/vite#2308

[anncwb]

但是我觉得项目循环依赖不可避免.所以我会在提下,不行的话只能逐个页面检查循环依赖.且你们自己新增的也不能用循环依赖.否则热更新还是会出错

[carl-jin]

但是我觉得项目循环依赖不可避免.所以我会在提下,不行的话只能逐个页面检查循环依赖.且你们自己新增的也不能用循环依赖.否则热更新还是会出错

我尝试修改了下, 但是对vite不熟悉, 现在我这边运行都正常了, 而且热更新很快, 基本上不到100ms就更新了, 但是我不清楚这样写有啥子弊端, 作者茶余饭后瞅瞅.

就只是把依赖注入全部关掉. 热更新就正常了

//    vite.config.ts
    plugins: [
      ...createVitePlugins(viteEnv, isBuild),
      {
        name: 'singleHMR',
        handleHotUpdate({ modules, file }) {
          //  todo 等作者更新 https://github.com/anncwb/vue-vben-admin/issues/376
          if (file.match(/xml$/)) return [];

          // 清掉所有依赖注入
          modules.map((m) => {
            m.importedModules = new Set()
            m.importers = new Set()
          });

          return modules;
        },
      },
    ],

[carl-jin]

我是从这个项目才接触到vite。 直到此刻 我才感觉到vite是真的快。修改完代码 还没来得及看显示器 代码已经更新好了

[anncwb]

老实说,我对这块也是不了解,你可以先用,然后反馈在这里.我也会按你的写法试试

[anncwb]

目前发现是有问题了，其实这样做等于vite1的写法了。会导致样式等其他关联文件修改的热更新失效

[carl-jin]

反正我觉得这样写 极大的加快了我开发的效率

[shuperry]

@anncwb @carl-jin 关注下这个 hmr 的问题在 vite 那边解决了吗？我看 vite 那边的 issue 是关了的 vitejs/vite#2308

[wangz-code]

这种写法, 反而更爽!

[shuperry]

有发现改了 vue 文件在某个标签上加了 class，虽然控制台有显示 hmr update 日志，但实际页面上并没有看到，必须要手动刷新才能看到，不知道为什么 hmr 基本不起作用了.

[passioncsu]

我哭了 修复完这个才知道vite有多快 之前都是每次修改都要手动刷新页面....

[QC2168]

谢谢 已解决

[mushu1990]

这样改好快我去。 什么个情况