How to accept HMR on option API vue 3 + Pinia

Question

I had some trouble with use pinia and vue 3(opt). In my case i can't understand how to accept hmr on pinia storages.

import { defineStore } from 'pinia'

export default defineStore('user', {
    state: () => ({
        authState: false,
   }))

defining store view like this, it not a function that i can void later in

import.meta.hot.accept(storeName, import.meta.hot)

and now im stooped with it and can't understand how to accept using Vite hmr with my storages

Already try to use import.meta.hot.accept(storeName, import.meta.hot) in my main component Application.vue but it return false with thow about unknown modules

Anybody know how to use HMR stores with Option API of VUE 3?

Answer 1

my mistake was that i don't use a named export/import in my pinia stores.

right way be somestore.js

import { defineStore, acceptHMRUpdate } from "pinia";

export const somestore = defineStore('uniqueId',{
   state:()=>({}),
   getters:{},
   actions:{}
})

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

and then in components need to named import of store { somestore }

import { mapStores } from 'pinia';
import { somestore } from './somestore.js'

export default{
   computed:{
   ...mapStores(somestore)
   }
}

this example of code wrote with OPTIONS API of vuejs

Thnx f attention