[core] Persisted state doesn't update when calling this.$reset() and then setting state values

[christianlmc]

Minimal example:

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  persist: true,
  actions: {
    // If this function is not async with await on $reset, the localstorage doesn't update (even though pinia does update)
    // If F5 is pressed after setCounter has been called, counter will go back to previous state instead of 100
    setCounter100() {
      this.$reset();
      this.counter = 100
    },
  },
})

[prazdevs]

Hi, what versions are you running ? I tried with the examples given in the repo (using vite + vue3) and with your exact store it works fine and properly saves counter as 100 in the storage, and rehydrates properly.

If you could provide a complete repo with your problem so it can be investigated. thanks :)

[christianlmc]

Sorry it took me so long, here is an example repo of the issue

https://github.com/christianlmc/bug-pinia-plugin-persistedstate

[prazdevs]

Okay, i investigated a bit, and there seems to be some off behaviour with the $reset method. The way mutations are committed is not the same on the very first time, and the following ones.
If you put this in your HomeView.vue

<script setup lang="ts">
import { useCounterStore } from "@/stores/counter";
import { storeToRefs } from "pinia";

const counterStore = useCounterStore();
const { counter } = storeToRefs(counterStore);
const { setCounter100 } = counterStore;

counterStore.$subscribe((e) => { console.log(e) })


</script>

<template>
  <main>
    <button @click="setCounter100">do thing</button>
    <div style="font-size: 3rem">Counter</div>
    {{ counter }}
    <input v-model="counter" />
    <div>Look at Local Storage, on the 'Application' tab on the Inspector</div>
    <div>It shows {"counter":0} (Tested on Chrome 99)</div>
  </main>
</template>

After loading the page, the first click on the button will give you 2 subscription events, and the state will be store in localStorage properly, but if you click again, only 1 subscription event containing everything is emitted, and the state is not persisted correctly. Reloading the page resets this behaviour every time. This seems more like a pinia issue/behaviour im not aware of.

Also it seems suspiciously tied to this issue vuejs/pinia#1129

[prazdevs]

or this one vuejs/pinia#992

[christianlmc]

Thank you @prazdevs, I will keep using the await this.$reset workaround for the time being

[ThatDeveloper]

Hey there @prazdevs
Is there an update on this matter? I can not make it work, even with the await. Could you maybe provide an example?

[MalronWall]

Hey @prazdevs ! 🖐
I have the same problem here...
Do you have any advice ?
I tried this :

async resetData(): Promise<void> {
  sessionStorage.removeItem('@actualStore')
  this.$reset()
  await this.save() // save in db
}

It works properly without the persist: true but not with... 😅
And the await this.$reset() described previously does not work too...
Thank you ! 🙏

[nneto]

or this one vuejs/pinia#992

For me, it's related to this one you linked. I'm going through the exact same problem of a $patch followed by directly writing the state. The state after patching is persisted, but when I do, for example, someStore.auth = false (in other part of the code, so I can't include it in the $patch), this change does not trigger a persist. Currently I have to someStore.$persist() right after someStore.auth = false so it is persisted.