HMR with added store

[CodyBontecou]

Hey @Deluze,

I've brought in Pinia for my state management and noticed state changes don't get HMR automatically. How can I get Vite to notice the changes and update the UI?

[Deluze]

Hello @CodyBontecou 👋

I spent some time to reproduce it, I indeed see that by default Vite does not apply HMR on the store.

According to the Pinia's HMR docs they mention that Vite supports handling HMR automatically, yet this is not the case with this project. I'm not that super familiar with front-end tech and this is my first time using Vite too.

Though, their example code in the docs does the following:

import { defineStore, acceptHMRUpdate } from 'pinia'

const useAuth = defineStore('auth', {
  // options...
})

// make sure to pass the right store definition, `useAuth` in this case.
if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useAuth, import.meta.hot))
}

Using the import.meta.hot.accept(...) will enable HMR on Pinia stores.

They have a demo here (stackblitz). Their demo uses Vite, but they still seem to use the above snippet in every store module (strangly?).

I played around with this a little bit, and changing getters automatically updates the state in the view too etc. I'm not sure if there's a better solution right now, perhaps there is.. I don't mind doing some more research on this in the upcoming weekend.

[Deluze]

Does above solve your problem?

[CodyBontecou]

Hey @Deluze,

Thank you for the speedy response. I want through your example as well as the links provided and haven't been able to get it to work.

I uploaded the project to this repo and here's the store.

[Deluze]

Mind explaining what you want to achieve exactly @CodyBontecou ?

I can use a getter in 2 ways with Pinia (this is what I tested for HMR):

either with:

{{ message }}

setup() {
   const main = useMainStore();
   const { message } = storeToRefs(main);

   return { message };
}

or

{{ main.message }}

setup() {
   return {
     main: useMainStore(),
   }
}

In above scenario's:

• Scenario 1 will not update the message in the view after updating the getter in the store.
• Scenario 2 (Accessing the store directly) it will update the message in the view after updating the getter in the store.

Though, electron-vue-template has the same behavior as in the stackblitz demo I linked above. Mind using the stackblitz demo, create a fork and link it to me to to show what you're exactly trying to achieve? Mentioning the steps to reproduce will also do, I might not be on the same page as you.

[CodyBontecou]

Aha! I got it, sorry for the confusion.

Updating the initial state doesn't trigger HMR and that's what was confusing me. Updating the getter does trigger HMR. I'm curious if it's possible to update the view whenever I change the initial state.

[Deluze]

Aha! I got it, sorry for the confusion.

Updating the initial state doesn't trigger HMR and that's what was confusing me. Updating the getter does trigger HMR. I'm curious if it's possible to update the view whenever I change the initial state.

Can't tell for sure 😅 never used Pinia before, I guess on web apps where HMR does not work the way you expect, you would be able to refresh the page. If you have a simple Electron app, hitting Ctrl R will reload the app without having to restart the dev server.