2021-05-29 解决 vite 下 vuex-module-decorators 的热更新问题

解决 vite 下 vuex-module-decorators 的热更新问题

vite 官方文档：https://cn.vitejs.dev/

vuex 官方文档：https://vuex.vuejs.org/zh/

vuex-module-decorators 地址：https://github.com/championswimmer/vuex-module-decorators

前言

最近使用了 vuex-module-decorators 这个包来写项目，在用 vue-cli(webpack) 搭建的项目下表现良好，但是在 vite 中遇到了点问题，下面来从源码看下怎么解决问题。

在此之前，先说下 vuex-module-decorators 这个包是用来干嘛的，主要功能就是用装饰器和 TypeScript 来写 vuex ，与原生 vuex 相比，好处就是多了类型提示，使用起来更加方便。我这里从官方文档摘抄一个例子

interface StoreType {
  mm: MyModule
}
// Declare empty store first
const store = new Vuex.Store<StoreType>({})

// Create module later in your code (it will register itself automatically)
// In the decorator we pass the store object into which module is injected
// NOTE: When you set dynamic true, make sure you give module a name
@Module({ dynamic: true, store: store, name: 'mm' })
class MyModule extends VuexModule {
  count = 0

  @Mutation
  incrCount(delta) {
    this.count += delta
  }
}

发现问题

接下来我会说下为什么 vuex-module-decorators 在 vue-cli(webpack) 搭建的项目下表现良好。

原因出在 webpack 的热更新机制。

在 webpack 中，如果修改了 css 则是不刷新页面的热更新，如果修改了 js ，则会刷新页面重新加载。这就是说，vuex-module-decorators 不支持热更新的问题被 webpack 掩盖了。

在 vite 中，源码出现改动时只会更新必要的部分，因此不会重新加载整个页面，但由于 vuex-module-decorators 不支持热更新，因此会出现重复注册 vuex module 的问题。在控制台会报如下警告。

[vuex] duplicate namespace  "app" for the namespaced module

解决问题

由于原项目已经年久失修，所以直接 fork 一个分支来改。

原项目使用 TypeScript 来编写，良好的类型提示使得没接触过这个项目的人也能快速看懂。

当然了，这里我们没必要看懂整个项目，只要找下 vuex module 是怎么注册的就行了。

通过翻看源码，我发现了如下内容：

// src/module/index.ts
function registerDynamicModule<S>(module: Mod<S, any>, modOpt: DynamicModuleOptions) {
  if (!modOpt.name) {
    throw new Error('Name of module not provided in decorator options')
  }

  if (!modOpt.store) {
    throw new Error('Store not provided in decorator options when using dynamic option')
  }

  modOpt.store.registerModule(
    modOpt.name, // TODO: Handle nested modules too in future
    module,
    { preserveState: modOpt.preserveState || false }
  )
}

这里就是 vuex-module-decorators 注册 DynamicModule 的源码，我们可以注意到这里完全没有对热更新做任何处理。

通过查阅 vuex 文档和 vite 文档，我发现 vuex 是支持热更新的，故只要做对 vite 的兼容就行了。

修改后的代码如下：

function registerDynamicModule<S>(dynamicModule: Mod<S, any>, modOpt: DynamicModuleOptions) {
  if (!modOpt.name) {
    throw new Error('Name of module not provided in decorator options')
  }

  if (!modOpt.store) {
    throw new Error('Store not provided in decorator options when using dynamic option')
  }
  if (import.meta.hot) { // 必需的条件守卫, 这样代码就可以在生产环境中被 tree-shaking 优化
    // vite 的热更新
    if (modOpt.store.hasModule(modOpt.name)) {
      // 如果遇到重复模块则热更新
      modOpt.store.hotUpdate({
        modules: {
          [modOpt.name]: dynamicModule
        }
      })
      return
    }
    modOpt.store.registerModule(modOpt.name, dynamicModule, {
      preserveState: modOpt.preserveState || false
    })
    return
  }
  modOpt.store.registerModule(modOpt.name, dynamicModule, {
    preserveState: modOpt.preserveState || false
  })
}

在项目中更新依赖后跑通了，也没有提示警告，页面也没有丢失状态，修改很成功。

修改后的包已经发布到了 GitHub，见 https://github.com/CaoMeiYouRen/vuex-module-decorators

由于懒得发布到 npm 了，所以直接从 GitHub 下载。

使用方法如下：

// package.json
{
    "dependencies": {
         "vuex-module-decorators": "CaoMeiYouRen/vuex-module-decorators"
    }
}
// 或者是  "vuex-module-decorators": "git+https://github.com/CaoMeiYouRen/vuex-module-decorators.git" 也一样，GitHub访问太慢的可以用镜像

兼容 webpack

本来的话应该到此就行结束了，不过之后我还是注意了一下在 webpack 下的情况。

在 cjs 中 import.meta.hot 是不存在的，所以上面的代码要兼容 webpack 的话应该改成这样。

function registerDynamicModule<S>(dynamicModule: Mod<S, any>, modOpt: DynamicModuleOptions) {
  if (!modOpt.name) {
    throw new Error('Name of module not provided in decorator options')
  }

  if (!modOpt.store) {
    throw new Error('Store not provided in decorator options when using dynamic option')
  }
  if (module.hot) { // 此处改为 module.hot 来支持 webpack 热更新。
    if (modOpt.store.hasModule(modOpt.name)) {
      // 如果遇到重复模块则热更新
      modOpt.store.hotUpdate({
        modules: {
          [modOpt.name]: dynamicModule
        }
      })
      return
    }
    modOpt.store.registerModule(modOpt.name, dynamicModule, {
      preserveState: modOpt.preserveState || false
    })
    return
  }
  modOpt.store.registerModule(modOpt.name, dynamicModule, {
    preserveState: modOpt.preserveState || false
  })
}

也可以直接使用原版

本文作者：草梅友仁
本文地址： https://blog.cmyr.ltd/archives/123b92.html
版权声明：转载请注明出处！