From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Mon, 25 Oct 2021 14:43:18 +0000 (+0200)
Subject: docs: hydrate example
X-Git-Tag: @pinia/nuxt@0.1.0~3
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=3cac7efe47d6a5ece0ebfee9bff9e9056c6000e3;p=thirdparty%2Fvuejs%2Fpinia.git

docs: hydrate example
---

diff --git a/packages/pinia/src/types.ts b/packages/pinia/src/types.ts
index 47376b99..05dd5afb 100644
--- a/packages/pinia/src/types.ts
+++ b/packages/pinia/src/types.ts
@@ -651,8 +651,25 @@ export interface DefineStoreOptions<
     >
 
   /**
-   * Allows hydrating the store during SSR when there is an available state in
-   * pinia.state.
+   * Allows hydrating the store during SSR when complex state (like client side only refs) are used in the store
+   * definition and copying the value from `pinia.state` isn't enough.
+   *
+   * @example
+   * If in your `state`, you use any `customRef`s, any `computed`s, or any `ref`s that have a different value on
+   * Server and Client, you need to manually hydrate them. e.g., a custom ref that is stored in the local
+   * storage:
+   *
+   * ```ts
+   * const useStore = defineStore('main', {
+   *   state: () => ({
+   *     n: useLocalStorage('key', 0)
+   *   }),
+   *   hydrate(storeState, initialState) {
+   *     // @ts-expect-error: https://github.com/microsoft/TypeScript/issues/43826
+   *     storeState.n = useLocalStorage('key', 0)
+   *   }
+   * })
+   * ```
    *
    * @param storeState - the current state in the store
    * @param initialState - initialState