Are you using Nuxt?
Describe the bug
When using pick option, elements that are persisted with value null are instead ignored and not save to Storage at all.
This is different than persisting entire store, without, pick or omit. In this case all keys are stored, and if they are null - the stored value is null.
I guess this is an issue with deep-pick-omit library.
This can be very problematic, when using the store witj pick option and synchronizing store access in different browser tabs with storage event. When one tab nullifies the values, the second tab gets storage event. It then uses $hydrate() to force the store to read from Storage, but since nullified keys are in fact non-existent in the storage, that hydration does nothing and 'old' values from the store are used, and not read from the Storage.
Reproduction
below
System Info
export const useAuthStore = defineStore('auth', () => {
const accessToken = ref<string | null>('test');
function clear() {
accessToken.value = null;
}
return {
accessToken,
clear,
};
}, {
persist: {
storage: localStorage,
pick: ['accessToken'],
afterHydrate: (ctx) => {
console.log('When clear called from other tab, this will not be null, but have old value:', ctx.store.accessToken);
},
},
});
....
const registerAuthStoreRefresh = () => {
const authStore = useAuthStore();
window.addEventListener('storage', (event) => {
if(event.key === authStore.$id)
authStore.$hydrate();
});
};
registerAuthStoreRefresh();
Used Package Manager
yarn
Validations
Are you using Nuxt?
Describe the bug
When using
pickoption, elements that are persisted with valuenullare instead ignored and not save to Storage at all.This is different than persisting entire store, without, pick or omit. In this case all keys are stored, and if they are null - the stored value is null.
I guess this is an issue with
deep-pick-omitlibrary.This can be very problematic, when using the store witj pick option and synchronizing store access in different browser tabs with storage event. When one tab nullifies the values, the second tab gets storage event. It then uses $hydrate() to force the store to read from Storage, but since nullified keys are in fact non-existent in the storage, that hydration does nothing and 'old' values from the store are used, and not read from the Storage.
Reproduction
below
System Info
Used Package Manager
yarn
Validations