From 40828b652012ee8df822271c967a4e2c0636e928 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Fri, 1 Nov 2024 13:12:32 +0100 Subject: [PATCH] docs: note about subscription flush Close vuejs/pinia#2819 --- packages/docs/core-concepts/state.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/docs/core-concepts/state.md b/packages/docs/core-concepts/state.md index 8c6052bc14..9c47bff68e 100644 --- a/packages/docs/core-concepts/state.md +++ b/packages/docs/core-concepts/state.md @@ -252,6 +252,19 @@ cartStore.$subscribe((mutation, state) => { }) ``` +### Flush timing + +Under the hood, `$subscribe()` uses Vue's `watch()` function. You can pass the same options as you would with `watch()`. This is useful when you want to immediately trigger subscriptions after **each** state change: + +```ts{4} +cartStore.$subscribe((state) => { + // persist the whole state to the local storage whenever it changes + localStorage.setItem('cart', JSON.stringify(state)) +}, { flush: 'sync' }) +``` + +### Detaching subscriptions + By default, _state subscriptions_ are bound to the component where they are added (if the store is inside a component's `setup()`). Meaning, they will be automatically removed when the component is unmounted. If you also want to keep them after the component is unmounted, pass `{ detached: true }` as the second argument to _detach_ the _state subscription_ from the current component: ```vue