GithubHelp home page GithubHelp logo

Comments (6)

prazdevs avatar prazdevs commented on May 31, 2024

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

from pinia-plugin-persistedstate.

christianlmc avatar christianlmc commented on May 31, 2024

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

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

from pinia-plugin-persistedstate.

prazdevs avatar prazdevs commented on May 31, 2024

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

from pinia-plugin-persistedstate.

prazdevs avatar prazdevs commented on May 31, 2024

or this one vuejs/pinia#992

from pinia-plugin-persistedstate.

christianlmc avatar christianlmc commented on May 31, 2024

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

from pinia-plugin-persistedstate.

ThatDeveloper avatar ThatDeveloper commented on May 31, 2024

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?

from pinia-plugin-persistedstate.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.