How to Reset store in setup syntax OR registerModule + unregisterModule alternative in Pinia?

[Rolanddoda]

I have created many Pinia stores in my app and they work great.
However, now I am adding more pages and I see the need to re-use those Pinia stores.
In order to re-use the stores, I need to clean up their state though. In Vuex I was using registerModule and unregisterModule to achieve having a fresh store.

I found $dispose but it doesn't work and everything seems reactive after I call it:

<script setup>
import { usePiniaStore } from 'my-pinia-file'

const myPiniaStore = usePiniaStore()
myPiniaStore.$dispose()

myPiniaStore.increaseCounter() // still reactive  
</script>
 

[posva]

The store will be reinstantiated if you dispose of it and then call usePiniaStore() again.

The short answer is there is no reset in setup/composition-api/function store. You have to manually write them yourself and you can keep the $reset name, it will override the one defined by pinia.

You could still create a plugin that adds this method automatically for every exposed ref by calling toRaw() on the store.$state and creating deep copies of every value.

[Rolanddoda]

@posva thanks for taking the time to answer.

I tried using $dispose but it doesn't seem to be doing anything.
I created an example you can run on Stackblitz HERE:

1. Click increase many times -> See the counter increasing
2. Click dispose
3. Click increase again -> The counter still increasing
4. Navigate to the about page -> See the counter still has the value from the home page

To make sure is understandable: We want a fresh store on each page

Increasing the value remains in sync between the two pages no matter if you call $dispose or not.

[dreambo8563]

@Rolanddoda I made a demo to investigate the $dispose.
https://stackblitz.com/edit/github-gs77lr-ew1zgb?file=src/views/HomeView.vue

$dispose works for new Init store. try to play with it. here is the related cases https://github.com/vuejs/pinia/blob/09e85dc6cb69492971e7796aec8b1a2b652c77b7/packages/pinia/__tests__/store.spec.ts

and I think a fresh store on each page means the data on each page is standalone, state management targets to deal with shared data. I thought your scenario is not suitable to use a state management tool like pinia.

[Rolanddoda]

@dreambo8563 I don't understand what you are trying to show in the demo since when navigating between Home and About pages, the counter keeps incrementing no matter if you call $dispose.

and I think a fresh store on each page means the data on each page is standalone, state management targets to deal with shared data. I thought your scenario is not suitable to use a state management tool like pinia.

My scenario is perfectly suitable for state management since the data stored in the Pinia store is accessed and manipulated by many components on a page.
The problem becomes visible when I want to re-use the Pinia store on other pages and I want to have a clean store initially.

If this sounds weird, it's the exact same thing I was doing with Vuex registerModule and unregisterModule. Every time the user visited the page where I needed the module, that module's state was clean/fresh.

[dreambo8563]

then, that's not the question about the $dispose, @posva provide the answer, $reset is you needed.

[Rolanddoda]

Yes, I know that I have to reset the store in order to get a fresh store but there is no built-in $reset function when using function syntax.

My question was: "How to Reset store in setup syntax OR registerModule + unregisterModule alternative in Pinia?"

And neither $reset, nor registerModule + unregisterModule alternative for having fresh stores is available.

Posva answered the question that I should do it manually via a plugin but he also said:

The store will be reinstantiated if you dispose of it and then call usePiniaStore() again.

That's why in my comment I mentioned that $dispose doesn't seem to "re-instantiate" the store. So probably re-instantiating a store doesn't mean re-creating a fresh store.