-
Notifications
You must be signed in to change notification settings - Fork 139
'pick' option doesn't store keys with null values #408
Description
Are you using Nuxt?
- Check this box if you encountered the issue using Nuxt and the included module.
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
- Follow our Code of Conduct
- Read the Contributing Guide.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- The provided reproduction is a minimal reproducible of the bug.