解决 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
  })
}

也可以直接使用原版