如何在Vue3+Quasar项目中全局启用Pinia的HMR，无需每个仓库加判断

完全可以在src/stores/index.ts中实现全局热模块替换配置，不用再在每个仓库文件里写重复的if (import.meta.hot)代码块。核心思路是封装一个带自动HMR逻辑的自定义defineStore函数，所有仓库都用这个自定义函数来定义，具体步骤如下：

1. 在src/stores/index.ts中封装自定义defineStore #

import { defineStore as piniaDefineStore, acceptHMRUpdate, StoreDefinition } from 'pinia'

// 封装自带HMR的defineStore
export function defineHMRStore<Id extends string, S, G, A>(
  id: Id,
  options: Omit<Parameters<typeof piniaDefineStore>[1], 'id'>
): StoreDefinition<Id, S, G, A> {
  // 调用Pinia原生的defineStore创建仓库
  const store = piniaDefineStore(id, options)

  // 仅在开发环境支持HMR时自动注册热更新
  if (import.meta.hot) {
    import.meta.hot.accept(acceptHMRUpdate(store, import.meta.hot))
  }

  return store
}

// 导出Pinia其他API，方便仓库文件直接使用
export * from 'pinia'

2. 仓库文件改用自定义的defineHMRStore #

修改所有仓库文件，替换原来的defineStore为我们封装的defineHMRStore，去掉原来的HMR代码块：

// 从自定义的stores/index导入defineHMRStore
import { defineHMRStore } from '@/stores'

export const useStoreProducts = defineHMRStore('products', {
  state: () => ({
    products: [],
  }),
  actions: {
    async loadProducts() {
      console.log('Loading products...')
    },
  },
})

原理说明 #

这个自定义函数会在每次创建仓库时，自动帮我们完成HMR的注册逻辑。由于import.meta.hot仅在开发环境（Quasar dev模式）下存在，生产环境打包时这段代码会被自动剔除，不会产生冗余。

如果某个别仓库需要单独禁用HMR，直接改用Pinia原生的defineStore即可，不影响全局配置。

内容的提问来源于stack exchange，提问作者Michael