8000 fix(useRouteHash, useRouteParams, useRouteQuery): fix effect triggeri… · vueuse/vueuse@965bf05 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit 965bf05

Browse files
aethraethr
authored
fix(useRouteHash, useRouteParams, useRouteQuery): fix effect triggering multiple times (#4113)
1 parent 5c598f1 commit 965bf05

File tree

6 files changed

+79
-4
lines changed

6 files changed

+79
-4
lines changed

‎packages/router/useRouteHash/index.test.ts

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { nextTick, reactive, ref } from 'vue-demi'
2-
import { describe, expect, it } from 'vitest'
1+
import { computed, nextTick, reactive, ref, watch } from 'vue-demi'
2+
import { describe, expect, it, vi } from 'vitest'
33
import { useRouteHash } from '.'
44

55
describe('useRouteHash', () => {
@@ -74,6 +74,28 @@ describe('useRouteHash', () => {
7474
expect(hash.value).toBe('foo')
7575
})
7676

77+
it('should trigger effects only once', async () => {
78+
const route = getRoute()
79+
const router = { replace: (r: any) => Object.assign(route, r) } as any
80+
const onUpdate = vi.fn()
81+
82+
const hash = useRouteHash('baz', { route, router })
83+
const hashObj = computed(() => ({
84+
hash: hash.value,
85+
}))
86+
87+
watch(hashObj, onUpdate)
88+
89+
hash.value = 'foo'
90+
91+
await nextTick()
92+
await nextTick()
93+
94+
expect(hash.value).toBe('foo')
95+
expect(route.hash).toBe('foo')
96+
expect(onUpdate).toHaveBeenCalledTimes(1)
97+
})
98+
7799
it('should allow ref or getter as default value', () => {
78100
let route = getRoute()
79101
const router = { replace: (r: any) => route = r } as any

‎packages/router/useRouteHash/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,9 @@ export function useRouteHash(
5151
watch(
5252
() => route.hash,
5353
() => {
54+
if (route.hash === _hash)
55+
return
56+
5457
_hash = route.hash
5558
_trigger()
5659
},

‎packages/router/useRouteParams/index.test.ts

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { effectScope, nextTick, reactive, ref, watch } from 'vue-demi'
1+
import { computed, effectScope, nextTick, reactive, ref, watch } from 'vue-demi'
22
import { describe, expect, it, vi } from 'vitest'
33
import type { Ref } from 'vue-demi'
44
import { useRouteParams } from '.'
@@ -216,6 +216,28 @@ describe('useRouteParams', () => {
216216
expect(onUpdate).not.toHaveBeenCalled()
217217
})
218218

219+
it('should trigger effects only once', async () => {
220+
const route = getRoute()
221+
const router = { replace: (r: any) => Object.assign(route, r) } as any
222+
const onUpdate = vi.fn()
223+
224+
const page = useRouteParams('page', 1, { transform: Number, route, router })
225+
const pageObj = computed(() => ({
226+
page: page.value,
227+
}))
228+
229+
watch(pageObj, onUpdate)
230+
231+
page.value = 2
232+
233+
await nextTick()
234+
await nextTick()
235+
236+
expect(page.value).toBe(2)
237+
expect(route.params.page).toBe(2)
238+
expect(onUpdate).toHaveBeenCalledTimes(1)
239+
})
240+
219241
it('should keep current query and hash', async () => {
220242
let route = getRoute()
221243
const router = { replace: (r: any) => route = r } as any

‎packages/router/useRouteParams/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,9 @@ export function useRouteParams<
9292
watch(
9393
() => route.params[name],
9494
(v) => {
95+
if (param === v)
96+
return
97+
9598
param = v
9699

97100
_trigger()

‎packages/router/useRouteQuery/index.test.ts

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { effectScope, nextTick, reactive, ref, watch } from 'vue-demi'
1+
import { computed, effectScope, nextTick, reactive, ref, watch } from 'vue-demi'
22
import { describe, expect, it, vi } from 'vitest'
33
import type { Ref } from 'vue-demi'
44
import { useRouteQuery } from '.'
@@ -226,6 +226,28 @@ describe('useRouteQuery', () => {
226226
expect(onUpdate).not.toHaveBeenCalled()
227227
})
228228

229+
it('should trigger effects only once', async () => {
230+
const route = getRoute()
231+
const router = { replace: (r: any) => Object.assign(route, r) } as any
232+
const onUpdate = vi.fn()
233+
234+
const page = useRouteQuery('page', 1, { transform: Number, route, router })
235+
const pageObj = computed(() => ({
236+
page: page.value,
237+
}))
238+
239+
watch(pageObj, onUpdate)
240+
241+
page.value = 2
242+
243+
await nextTick()
244+
await nextTick()
245+
246+
expect(page.value).toBe(2)
247+
expect(route.query.page).toBe(2)
248+
expect(onUpdate).toHaveBeenCalledTimes(1)
249+
})
250+
229251
it('should keep current query and hash', async () => {
230252
let route = getRoute()
231253
const router = { replace: (r: any) => route = r } as any

‎packages/router/useRouteQuery/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,9 @@ export function useRouteQuery<
8989
watch(
9090
() => route.query[name],
9191
(v) => {
92+
if (query === v)
93+
return
94+
9295
query = v
9396

9497
_trigger()

0 commit comments

Comments
 (0)
0