Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

feat(nuxt): deep watch useCookie ref value by default #9664

Merged
merged 7 commits into from
Dec 19, 2022
Merged

feat(nuxt): deep watch useCookie ref value by default #9664

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8b32b29
feat(nuxt): useCookie add deep watch option
xtoolkit Dec 11, 2022
b6b6bfc
docs(api): useCookie add deepWatch option
xtoolkit Dec 12, 2022
8955560
feat(nuxt): useCookie change deepWatch to watch option
xtoolkit Dec 12, 2022
748dd0b
boolean|shallow
pi0 Dec 12, 2022
5b81275
enable watch by default
pi0 Dec 12, 2022
98e4cbf
docs: fix example
danielroe Dec 12, 2022
ab85b91
docs(api): update useCookie example
xtoolkit Dec 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions docs/content/1.docs/3.api/1.composables/use-cookie.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,35 @@ be returned as the cookie's value.

Specifies a function that returns the cookie's default value. The function can also return a `Ref`.

### `watch`

Specifies the `boolean` or `string` value for [watch](https://vuejs.org/api/reactivity-core.html#watch) cookie ref data.

- `true` or `shallow` will watch cookie ref data.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- `true` or `shallow` will watch cookie ref data.
- `shallow` will watch cookie ref data.

- `false` will not watch cookie data.
- `deep` will watch cookie ref data and data sources change.

```vue
<template>
<div>
<h1> List: {{ list }}</h1>
<button @click="add">
Add
</button>
</div>
</template>

<script setup>
const list = useCookie('list', { default: () => [] }, {
deepWatch: true
})

function add() {
list.value?.push(Math.round(Math.random() * 1000))
}
</script>
```

## Handling Cookies in API Routes

You can use `getCookie` and `setCookie` from [`h3`](https://github.com/unjs/h3) package to set cookies in server API routes.
Expand Down
8 changes: 7 additions & 1 deletion packages/nuxt/src/app/composables/cookie.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export interface CookieOptions<T = any> extends _CookieOptions {
decode?(value: string): T
encode?(value: T): string
default?: () => T | Ref<T>
watch?: boolean | 'deep' | 'shallow'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
watch?: boolean | 'deep' | 'shallow'
watch?: false | 'deep' | 'shallow'

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think better keep boolean type. Because it maybe passed by variable.

export function useCookieTest(watch: boolean) {
  const test = useCookie('test', {}, {watch})
  const change = () => {test.value = 100}

  return {change}
}

}

export interface CookieRef<T> extends Ref<T> {}
Expand All @@ -32,7 +33,12 @@ export function useCookie <T = string | null> (name: string, _opts?: CookieOptio
const cookie = ref<T | undefined>(cookies[name] as any ?? opts.default?.())

if (process.client) {
watch(cookie, () => { writeClientCookie(name, cookie.value, opts as CookieSerializeOptions) })
const callback = () => { writeClientCookie(name, cookie.value, opts as CookieSerializeOptions) }
if (opts.watch) {
pi0 marked this conversation as resolved.
Show resolved Hide resolved
watch(cookie, callback, { deep: opts.watch === 'deep' })
} else {
callback()
}
} else if (process.server) {
const nuxtApp = useNuxtApp()
const writeFinalCookieValue = () => {
Expand Down