Reset Pinia store nuxt3 with vite HMR

Question

I am having issues with my store not resetting properly when locally developing, this is (i suppose) because of Vite HMR in my Nuxt3 application.

My store is defined as so:

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();
      // The initialize function sets the dataTableName and loads the columns
      this.dataTableName = dtName
      this.fetchDataTableColumns(nuxtApp)
    },
    async fetchInitialDataToShowState (nuxtApp) {
      // Implementation
    },
    async fetchDataTableColumns (nuxtApp) {
      // Impl
    },
  },
})

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

And then my page consists of multiple components, the most important ones are:

• ManageVacancies.vue
  • DataTable.vue
  • PreviewPanelDetail.vue

There are in total 4 components that need to use the Pinia store to get or set data.

In the ManageVacancies.vue page is the entry point to the page, it defines the dataTableName and starts the initialisation of the store as such:

<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>

In its children components I am not initialising the store again, just updating values where applicable.

This solution works on our testing environments. But when developing locally, we are using Nuxt3 with Vite and HMR enabled.

If I make a change in the DataTable.vue file, only that file will be reloaded by HMR and thus the Pinia store is not being re-initialised properly each time.

If I clicked on a row in the DataTable.vue file, it will set the value of focussedRow to the row's value. And this value is being shown in the PreviewPanelDetail.vue file. And if I then make a code change inside the DataTable.vue file, I would want the pinia store to be reset, so that the focussedRow becomes null again, and the preview panel does not show my previous data anymore.

How do I achieve this behavior?