docs: improve useState docs and add example (#1961)

Co-authored-by: pooya parsa <pyapar@gmail.com>
This commit is contained in:
Sébastien Chopin 2021-11-16 14:17:52 +01:00 committed by GitHub
parent 767eee0024
commit bf0933a2f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 61 additions and 25 deletions

View File

@ -31,9 +31,7 @@ const state = useState<T>(key: string, init?: () => T): Ref<T>
Using [auto-imported composables](/docs/directory-structure/composables) we can define global type-safe states. Using [auto-imported composables](/docs/directory-structure/composables) we can define global type-safe states.
```ts [composables/states.ts] ::code-group
export const useColor = () => useState<string>('color', () => 'pink')
```
```vue [app.vue] ```vue [app.vue]
<script setup> <script setup>
@ -43,11 +41,30 @@ const color = useColor() // Same as useState('color')
<template> <template>
Current color: {{ color }} Current color: {{ color }}
</template> </template>
``` ```
```ts [composables/states.ts]
export const useColor = () => useState<string>('color', () => 'pink')
```
::
## Example ## Example
In this example, we use a server-only plugin to find about request locale. In this example, we use a [server-only plugin](/docs/directory-structure/plugins) to find about request locale.
::code-group
```vue [app.vue]
<script setup>
const locale = useLocale()
</script>
<template>
Current locale: {{ locale }}
</template>
```
```ts [composables/states.ts] ```ts [composables/states.ts]
export const useLocale = () => useState<string>('locale', () => 'en') export const useLocale = () => useState<string>('locale', () => 'en')
@ -56,16 +73,10 @@ export const useLocale = () => useState<string>('locale', () => 'en')
```ts [plugins/locale.server.ts] ```ts [plugins/locale.server.ts]
export default defineNuxtPlugin((nuxtApp) => { export default defineNuxtPlugin((nuxtApp) => {
const locale = useLocale() const locale = useLocale()
locale.value = nuxtApp.ssrContext?.req.headers['accept-language']?.split(',')[0] locale.value = locale.value ?? nuxtApp.ssrContext?.req.headers['accept-language']?.split(',')[0]
}) })
``` ```
```vue [app.vue] ::
<script setup>
const locale = useLocale() // Same as useState('locale')
</script>
<template> :button-link[Full example on StackBlitz]{href="https://stackblitz.com/github/nuxt/framework/tree/main/examples/use-state?terminal=dev" blank}
Current locale: {{ locale }}
</template>
```

View File

@ -1,15 +1,31 @@
<script setup>
const locale = useLocale()
const locales = [
'en-US',
'en-GB',
'ko-KR',
'ar-EG',
'fa-IR',
'ja-JP-u-ca-japanese'
]
if (!locales.includes(locale.value)) {
locales.unshift(locale.value)
}
// Using Intl.DateTimeFormat for language-sensitive date and time formatting
// Learn more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
const NUXT_BIRTHDAY = new Date('2016-10-26')
const date = computed(() => new Intl.DateTimeFormat(locale.value).format(NUXT_BIRTHDAY))
</script>
<template> <template>
<div> <div>
Locale: {{ locale }} <h2>Nuxt birthday: {{ date }}</h2>
<button @click="updateLocale"> <label for="locale-chooser">Locale: </label>
Set to Klington <select id="locale-chooser" v-model="locale">
</button> <option v-for="l of locales" :key="l" :value="l">
{{ l }}
</option>
</select>
</div> </div>
</template> </template>
<script setup>
// Defined in composables/stats.ts
// same as useState('locale')
const locale = useLocale()
const updateLocale = () => { locale.value = 'tlh-klingon' }
</script>

View File

@ -1,4 +1,13 @@
/**
* Nuxt will automatically read the files in your plugins directory and load them.
* You can use .server or .client in the file name to load a plugin just on server- or client-side.
* https://v3.nuxtjs.org/docs/directory-structure/plugins
*/
export default defineNuxtPlugin((nuxtApp) => { export default defineNuxtPlugin((nuxtApp) => {
const locale = useLocale() const locale = useLocale()
locale.value = nuxtApp.ssrContext?.req.headers['accept-language']?.split(',')[0] // Learn more about the nuxtApp interface on https://v3.nuxtjs.org/docs/usage/nuxt-app#nuxtapp-interface-advanced
const req = nuxtApp.ssrContext?.req
// Set default locale based request headers (browser locale)
locale.value = locale.value ?? req.headers['accept-language']?.split(',')[0]
}) })