feat(useStorage): make storage key reactive #4464
Conversation
|
Hey, based on this implementation, how would you suggest if I am looking to have some key split based on a reactive value like so: const breakpoints = useBreakpoints();
const activeBp = useComputed(() => breakpoints.active().value)
const dataForBreakpoint = useLocalStorage(() => `key-${activeBp.value}`, () => ({ [activeBp.value]: 'some value' })) |
Hi, you can use the getter like you wrote in your example or pass just the ref: const breakpoints = useBreakpoints();
const activeBp = useComputed(() => breakpoints.active().value)
const dataForBreakpoint = useLocalStorage(activeBp, () => ({ [activeBp.value]: 'some value' }))
// or
const storageKey = computed(() => `key-${activeBp.value}`);
const dataForBreakpoint = useLocalStorage(storageKey, () => ({ [activeBp.value]: 'some value' }))However, the defaults you pass with the reactive value won't change when |
Thanks! No, that's my issue is that the defaults isn't updating and rather updating the old key's value into the localStorage.. :/ so I'm wondering if I restructure my logic instead. |
You can just set a new value when the value changes if it's necessary. |
Before submitting the PR, please make sure you do the following
fixes #123).Description
This PR makes
keyargument foruseStoragecomposable reactive. It means if we change the key the data value should be taken from the appropriate key in storage, otherwise if the storage's value doesn't exist we use a default value as a new value for the data value and apply it to the storage by the new key.Due to Vue updates flush and pausing/resuming writing to storage on the data value update in the current implementation, it requires to use
nextTickafter the first change if we change data and key together independently on the order. For example:Implements #4289
Additional context
Additionally, updated
useLocalStorageanduseSessionStoragetypes according to the new type of theuseStoragekey.