mirror of
https://github.com/nuxt/nuxt.git
synced 2025-01-22 11:22:43 +00:00
docs: add more context about navigation
mode in callOnce
composable (#30612)
This commit is contained in:
parent
5ab0e73d8a
commit
2dd767216c
@ -24,6 +24,8 @@ This is useful for code that should be executed only once, such as logging an ev
|
|||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
The default mode of `callOnce` is to run code only once. For example, if the code runs on the server it won't run again on the client. It also won't run again if you `callOnce` more than once on the client, for example by navigating back to this page.
|
||||||
|
|
||||||
```vue [app.vue]
|
```vue [app.vue]
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const websiteConfig = useState('config')
|
const websiteConfig = useState('config')
|
||||||
@ -35,6 +37,23 @@ await callOnce(async () => {
|
|||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
It is also possible to run on every navigation while still avoiding the initial server/client double load. For this, it is possible to use the `navigation` mode:
|
||||||
|
|
||||||
|
```vue [app.vue]
|
||||||
|
<script setup lang="ts">
|
||||||
|
const websiteConfig = useState('config')
|
||||||
|
|
||||||
|
await callOnce(async () => {
|
||||||
|
console.log('This will only be logged once and then on every client side navigation')
|
||||||
|
websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
|
||||||
|
}, { mode: 'navigation' })
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
::important
|
||||||
|
`navigation` mode is available since [Nuxt v3.15](/blog/v3-15).
|
||||||
|
::
|
||||||
|
|
||||||
::tip{to="/docs/getting-started/state-management#usage-with-pinia"}
|
::tip{to="/docs/getting-started/state-management#usage-with-pinia"}
|
||||||
`callOnce` is useful in combination with the [Pinia module](/modules/pinia) to call store actions.
|
`callOnce` is useful in combination with the [Pinia module](/modules/pinia) to call store actions.
|
||||||
::
|
::
|
||||||
@ -52,9 +71,22 @@ Note that `callOnce` doesn't return anything. You should use [`useAsyncData`](/d
|
|||||||
## Type
|
## Type
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
callOnce(fn?: () => any | Promise<any>): Promise<void>
|
callOnce (key?: string, fn?: (() => any | Promise<any>), options?: CallOnceOptions): Promise<void>
|
||||||
callOnce(key: string, fn?: () => any | Promise<any>): Promise<void>
|
callOnce(fn?: (() => any | Promise<any>), options?: CallOnceOptions): Promise<void>
|
||||||
|
|
||||||
|
type CallOnceOptions = {
|
||||||
|
/**
|
||||||
|
* Execution mode for the callOnce function
|
||||||
|
* @default 'render'
|
||||||
|
*/
|
||||||
|
mode?: 'navigation' | 'render'
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Parameters
|
||||||
|
|
||||||
- `key`: A unique key ensuring that the code is run once. If you do not provide a key, then a key that is unique to the file and line number of the instance of `callOnce` will be generated for you.
|
- `key`: A unique key ensuring that the code is run once. If you do not provide a key, then a key that is unique to the file and line number of the instance of `callOnce` will be generated for you.
|
||||||
- `fn`: The function to run once. This function can also return a `Promise` and a value.
|
- `fn`: The function to run once. This function can also return a `Promise` and a value.
|
||||||
|
- `options`: Setup the mode, either to re-execute on navigation (`navigation`) or just once for the lifetime of the app (`render`). Defaults to `render`.
|
||||||
|
- `render`: Executes once during initial render (either SSR or CSR) - Default mode
|
||||||
|
- `navigation`: Executes once during initial render and once per subsequent client-side navigation
|
||||||
|
Loading…
Reference in New Issue
Block a user