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://wp.cmyr.ltd/archives/resolve-the-hot-update-issue-of-vite-under-vuex
- 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
欢迎关注我的其它发布渠道
发表回复
要发表评论,您必须先登录。