Closed m0dch3n closed 2 years ago
You need to write to store
too:
if (options.persist) {
for (const persistKey of options.persist) {
console.log(persistKey);
const v = useLocalStorage(
store.$id,
store.$state[persistKey]
);
store[persistKey] = v
store.$state[persistKey] = v
}
}
@posva
Thank you for your quick reply and help! I fixed it and applied it on my stackblitz test environment.
However a new issue now raised:
import { defineStore, acceptHMRUpdate } from 'pinia';
import { ref, computed } from 'vue';
export const useFPStore = defineStore(
'fp',
() => {
const myStateVar = ref('init fp');
const myComputed = computed(() => {
const fp = useFPStore();
console.log('myStateVar.value from fp', myStateVar.value);
console.log('fp.myStateVar', fp.myStateVar);
return myStateVar.value;
});
return {
myStateVar,
myComputed,
};
},
{ persist: ['myStateVar'] }
);
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useFPStore, import.meta.hot));
}
By assigning v
to store[persistKey]
I lose unfortunately the reference to
myStateVar.value
in my computed
getter, due to the override in plugin.
(the value stays to 'init fp'
for myStateVar.value)
In your documentation you pass (state)
to each getter. Is there a similar API maybe I can use by defining my store with a function ?
Or is the best way, to inject the current state in the computed by myself with const fp = useFPStore();
PS:
I know I can also have the useLocalStorage since the beginning, but this would make my code less flexible...
I prefer doing it by plugin.
And of course another idea, which I could do for my persistPlugin
, is to subscribe to the mutations and do the getItem
, setItem
etc myself, but this is more boiler code, and looks less nicer...
Reproduction
Please visit Stackblitz to check the 4 different (
d
,fp
,fap
,fnp
) simple stores I created.Actual behavior
Check the console:
fp
andfnp
are not console logged during the subscriptionCheck the localstorage:
fp
is not persistedand
The difference between
fp
andfap
is:fp
containsRef
fap
containsRemovableRef
from@vueuse/core
Expected behavior
fp
andfnp
should callback the subscription (seems to be related when the var is aref
)d
,fap
,fp
should all be persisted (when overwriting theref
in the plugin with useLocalStorage seems not to fix the issue of fp)