Comments (6)
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.
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.
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.
or this one vuejs/pinia#992
from pinia-plugin-persistedstate.
Thank you @prazdevs, I will keep using the await this.$reset
workaround for the time being
from pinia-plugin-persistedstate.
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)
- 组件外使用代persist的pinia store ,无法持久化 HOT 3
- Persistence doesn't work? HOT 3
- How to handle this warning? Inconsistent rendering between server and client HOT 3
- reactive([1]) Unable to deserialize properly HOT 2
- Save to store after X seconds of no further changes. HOT 1
- Having interval inside a persistent store breaks persisting
- [pinia-plugin-persistedstate] Error: [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin HOT 2
- In the cookie store defineNuxtRouteMiddleware method was used in nuxt3 unable to get to the store of value HOT 3
- Critical security vulnerability? HOT 6
- nuxt bug Cannot read properties of undefined (reading 'sessionStorage') HOT 1
- Automatically set `Vary: Cookie` response header in Nuxt SSR
- pinia.use(piniaPersist) in a separate file, causing local storage to fail HOT 2
- Missing "./package.json" export HOT 1
- Not effective when working with vee-validate
- Global `cookieOptions` are not applied in Nuxt 3 HOT 1
- Type safe persist paths HOT 2
- Store not hydrated from cookies when used with `@nuxtjs/i18n` and `routeRules`
- Using store outside setup(), state persistence is not possible HOT 1
- The type of map print in console.log (typeof this.userMap) is object HOT 1
- Persist for "composition api" style HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pinia-plugin-persistedstate.