Using Vue 3 in combination with VueUse's useStorage to sync reactive state with localStorage has presented a challenge for me. Whenever I programmatically clear localStorage during user logout processes, it seems to automatically refill with previous values. Here’s my current approach to handling the logout scenario:
import { useStorage, nextTick } from '@vueuse/core';
const userSettings = useStorage('user-settings', {});
async function logoutAndClear() {
// Reset user settings before clearing localStorage
userSettings.value = {};
await nextTick(); // Ensuring Vue's reactivity system updates the state
localStorage.clear(); // Attempting to clear all localStorage items
}
Despite these efforts, old user-settings values quickly repopulate in localStorage right after the clear() operation. My suspicion is that VueUse's reactivity system detects changes and writes back to localStorage.
How can I effectively clear localStorage without triggering an immediate refill by VueUse's useStorage?