Nuxt3+Vite开发环境下Pinia Store无法随HMR重置的问题求助

测试环境中Pinia Store运行正常，但在Nuxt3 + Vite的本地开发环境（开启HMR）下，Store无法正确重置。

Store定义 #

import { defineStore, acceptHMRUpdate } from 'pinia'
import {
  returnDataTableDefaultColumnsFullInfo,
  returnDataTableColumnsFullInfoForFields,
  returnDataTableAllColumns,
} from 'gad-shared/data/dataTableConfig.mjs'

export const useDataTableStore = defineStore('data-table', {
  state: () => ({
    dataTableName: null,
    dataTableColumns: [],
    dataVisibilitySelectedOption: null,
    selectedRows: [],
    focussedRow: null,
  }),
  getters: {
    getDataTableName: (state) => state.dataTableName,
    getDataTableColumns: (state) => state.dataTableColumns,
    getDataVisibilitySelectedOption: (state) => state.dataVisibilitySelectedOption,
    getSelectedRows: (state) => state.selectedRows,
    getFocussedRow: (state) => state.focussedRow,
  },
  actions: {
    async initialize (nuxtApp, dtName) {
      this.$reset();
      // 初始化逻辑：设置表名并加载列信息
      this.dataTableName = dtName
      this.fetchDataTableColumns(nuxtApp)
    },
    async fetchInitialDataToShowState (nuxtApp) {
      // 业务实现
    },
    async fetchDataTableColumns (nuxtApp) {
      // 业务实现
    },
  },
})

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useDataTableStore, import.meta.hot))
}

页面初始化代码 #

在ManageVacancies.vue中初始化Store：

<script setup>
import { useDataTableStore } from '@/stores/dataTableStore'

const nuxtApp = useNuxtApp()
const dtStore = useDataTableStore()

const setDataTableName = async () => {
  if (isSuperAuthor(nuxtApp.$auth.user)) {
    await dtStore.initialize(nuxtApp, 'data_table_super_admin_manage_vacancies')
  } else if (nuxtApp.$globalState.toggledOrganisationInfo && nuxtApp.$globalState.toggledOrganisationInfo.organisationCategoryId !== 4) {
    await dtStore.initialize(nuxtApp, 'data_table_organisation_manage_vacancies')
  } else if (nuxtApp.$globalState.toggledOrganisationInfo && nuxtApp.$globalState.toggledOrganisationInfo.organisationCategoryId === 4) {
    await dtStore.initialize(nuxtApp, 'data_table_company_manage_vacancies')
  }
}
await setDataTableName()
</script>

问题现象 #

修改DataTable.vue文件时，仅该组件被HMR重载，Pinia Store未重新初始化。例如点击DataTable的行后，focussedRow被设置为对应行值，修改代码后该值仍保留，PreviewPanelDetail仍显示旧数据。

1. 组件内监听HMR事件触发重置 #

在ManageVacancies.vue中添加HMR事件监听，子组件更新时重新初始化Store：

<script setup>
import { useDataTableStore } from '@/stores/dataTableStore'

const nuxtApp = useNuxtApp()
const dtStore = useDataTableStore()

const setDataTableName = async () => {
  // 原初始化逻辑不变
  if (isSuperAuthor(nuxtApp.$auth.user)) {
    await dtStore.initialize(nuxtApp, 'data_table_super_admin_manage_vacancies')
  } else if (nuxtApp.$globalState.toggledOrganisationInfo && nuxtApp.$globalState.toggledOrganisationInfo.organisationCategoryId !== 4) {
    await dtStore.initialize(nuxtApp, 'data_table_organisation_manage_vacancies')
  } else if (nuxtApp.$globalState.toggledOrganisationInfo && nuxtApp.$globalState.toggledOrganisationInfo.organisationCategoryId === 4) {
    await dtStore.initialize(nuxtApp, 'data_table_company_manage_vacancies')
  }
}

await setDataTableName()

// 监听HMR更新事件，触发Store重置与初始化
if (import.meta.hot) {
  import.meta.hot.on('vite:beforeUpdate', async () => {
    await setDataTableName()
  })
}
</script>

2. 扩展Store的HMR处理逻辑 #

修改Store文件的HMR接受逻辑，更新时主动重置Store：

// 在Store文件末尾修改HMR部分
if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    // 执行Pinia默认HMR更新
    acceptHMRUpdate(useDataTableStore, import.meta.hot)
    // 获取当前Store实例并重置
    const store = useDataTableStore()
    store.$reset()
    // 若需要自动重新初始化，可在此调用initialize（需确保能获取到nuxtApp，可通过全局方式或调整逻辑）
  })
}

3. 全局Nuxt插件监听HMR #

创建Nuxt插件，全局监听HMR并重置指定Store：

// plugins/hmr-reset-store.ts
export default defineNuxtPlugin((nuxtApp) => {
  if (import.meta.hot && process.dev) {
    import.meta.hot.on('vite:afterUpdate', async () => {
      const dtStore = useDataTableStore(nuxtApp.$pinia)
      dtStore.$reset()
      
      // 重新初始化Store
      let dtName = ''
      if (isSuperAuthor(nuxtApp.$auth.user)) {
        dtName = 'data_table_super_admin_manage_vacancies'
      } else if (nuxtApp.$globalState.toggledOrganisationInfo && nuxtApp.$globalState.toggledOrganisationInfo.organisationCategoryId !== 4) {
        dtName = 'data_table_organisation_manage_vacancies'
      } else if (nuxtApp.$globalState.toggledOrganisationInfo && nuxtApp.$globalState.toggledOrganisationInfo.organisationCategoryId === 4) {
        dtName = 'data_table_company_manage_vacancies'
      }
      await dtStore.initialize(nuxtApp, dtName)
    })
  }
})

4. 手动重置（临时方案） #

开发时可在浏览器控制台手动执行重置：

useDataTableStore().$reset()

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