From 36e0ec6aa6f5ec682413c1ef05a2948cfd56d5a8 Mon Sep 17 00:00:00 2001 From: Nikita Mikhailov Date: Fri, 16 Sep 2022 20:14:09 +0300 Subject: [PATCH 1/3] fix: useStorage sync storage in the same document --- packages/core/useStorage/index.test.ts | 21 ++++++++++++++++++++- packages/core/useStorage/index.ts | 25 ++++++++++++++++++++----- 2 files changed, 40 insertions(+), 6 deletions(-) diff --git a/packages/core/useStorage/index.test.ts b/packages/core/useStorage/index.test.ts index 51b2e563c3d..1a85450a5c0 100644 --- a/packages/core/useStorage/index.test.ts +++ b/packages/core/useStorage/index.test.ts @@ -1,5 +1,5 @@ import { debounceFilter, promiseTimeout } from '@vueuse/shared' -import { isVue3, ref } from 'vue-demi' +import { isVue3, nextTick, ref } from 'vue-demi' import { nextTwoTick, useSetup } from '../../.test' import { useStorage } from '.' @@ -358,4 +358,23 @@ describe('useStorage', () => { const customRef2 = useStorage(KEY, 2, storage, { mergeDefaults: (value, initial) => value + initial }) expect(customRef2.value).toEqual(3) }) + + it.only('sync several refs', async () => { + storage.setItem(KEY, '0') + + const first = useStorage(KEY, 0, storage) + const second = useStorage(KEY, 1, storage) + + expect(first.value).toBe(0) + expect(second.value).toBe(0) + + await nextTick() + + first.value = 5 + + await nextTick() + + expect(first.value).toBe(5) + expect(second.value).toBe(5) + }) }) diff --git a/packages/core/useStorage/index.ts b/packages/core/useStorage/index.ts index f2ca68b9e52..e4ecce83589 100644 --- a/packages/core/useStorage/index.ts +++ b/packages/core/useStorage/index.ts @@ -160,19 +160,34 @@ export function useStorage { flush, deep, eventFilter }, ) - if (window && listenToStorageChanges) + const CUSTOM_EVENT = '_vueuse_storage' + + if (window && listenToStorageChanges) { + // The storage event is not working with the same document. useEventListener(window, 'storage', update) + useEventListener(window, CUSTOM_EVENT, update) + } update() return data function write(v: unknown) { + let newValue: null | string = null + try { - if (v == null) - storage!.removeItem(key) - else - storage!.setItem(key, serializer.write(v)) + if (v == null) { storage!.removeItem(key) } + else { + newValue = serializer.write(v) + + storage!.setItem(key, newValue) + } + + if (window && listenToStorageChanges) { + const event = new StorageEvent(CUSTOM_EVENT, { key, newValue }) + + window.dispatchEvent(event) + } } catch (e) { onError(e) From 09c640bde9c9ae0066484217cd3a205f155dca4d Mon Sep 17 00:00:00 2001 From: Nikita Mikhailov Date: Fri, 16 Sep 2022 20:26:11 +0300 Subject: [PATCH 2/3] refactor: remove only in tests --- package.json | 2 +- packages/core/useStorage/index.test.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 3e0df51e1a0..adf428b9473 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "release": "bumpp --execute=\"npm run release:prepare\" --all", "release:prepare": "npm run build:types && npm run update", "size": "esno scripts/export-size.ts", - "test": "vitest", + "test": "vitest --watch", "test:2": "vue-demi-switch 2.7 vue2 && vitest run --silent", "test:3": "vue-demi-switch 3 && vitest run", "test:all": "nr test:3 && nr test:2 && vue-demi-switch 3", diff --git a/packages/core/useStorage/index.test.ts b/packages/core/useStorage/index.test.ts index 1a85450a5c0..0f0e0411113 100644 --- a/packages/core/useStorage/index.test.ts +++ b/packages/core/useStorage/index.test.ts @@ -359,7 +359,7 @@ describe('useStorage', () => { expect(customRef2.value).toEqual(3) }) - it.only('sync several refs', async () => { + it('sync several refs', async () => { storage.setItem(KEY, '0') const first = useStorage(KEY, 0, storage) From fb889278534de581aacbf56dba25e5e2892bf538 Mon Sep 17 00:00:00 2001 From: Nikita Mikhailov Date: Fri, 16 Sep 2022 20:27:12 +0300 Subject: [PATCH 3/3] refactor: remove package json changes --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index adf428b9473..3e0df51e1a0 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "release": "bumpp --execute=\"npm run release:prepare\" --all", "release:prepare": "npm run build:types && npm run update", "size": "esno scripts/export-size.ts", - "test": "vitest --watch", + "test": "vitest", "test:2": "vue-demi-switch 2.7 vue2 && vitest run --silent", "test:3": "vue-demi-switch 3 && vitest run", "test:all": "nr test:3 && nr test:2 && vue-demi-switch 3",