From 75f5c51cceab501406883acec01b48e2ec6294f8 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Sun, 24 Dec 2023 11:03:54 +0100
Subject: [PATCH] docs: fixes

---
 packages/docs/ssr/nuxt.md                  | 32 ++++++++++++++++------
 packages/nuxt/playground/app.vue           |  2 ++
 packages/nuxt/playground/nuxt.config.ts    |  3 +-
 packages/nuxt/playground/stores/counter.ts |  9 ++++++
 4 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/packages/docs/ssr/nuxt.md b/packages/docs/ssr/nuxt.md
index c53d28fb4a..a581887b72 100644
--- a/packages/docs/ssr/nuxt.md
+++ b/packages/docs/ssr/nuxt.md
@@ -36,7 +36,28 @@ export default defineNuxtConfig({
 
 And that's it, use your store as usual!
 
-## Using the store outside of `setup()`
+## Awaiting for actions in pages
+
+As with `onServerPrefetch()`, you can call a store action within `asyncData()`. Given how `useASyncData()` works, **make sure to return a value**. This will allow Nuxt to skip running the action on the client side and reuse the value from the server.
+
+```vue{3-4}
+<script setup>
+const store = useStore()
+// we could also extract the data, but it's already present in the store
+await useAsyncData('user', () => store.fetchUser())
+</script>
+```
+
+If your action doesn't resolve a value, you can add any non nullish value:
+
+```vue{3}
+<script setup>
+const store = useStore()
+await useAsyncData('user', () => store.fetchUser().then(() => true))
+</script>
+```
+
+::: tip
 
 If you want to use a store outside of `setup()`, remember to pass the `pinia` object to `useStore()`. We added it to [the context](https://nuxtjs.org/docs/2.x/internals-glossary/context) so you have access to it in `asyncData()` and `fetch()`:
 
@@ -50,14 +71,7 @@ export default {
 }
 ```
 
-As with `onServerPrefetch()`, you don't need to do anything special if you want to call a store action within `asyncData()`:
-
-```vue
-<script setup>
-const store = useStore()
-const { data } = await useAsyncData('user', () => store.fetchUser())
-</script>
-```
+:::
 
 ## Auto imports
 
diff --git a/packages/nuxt/playground/app.vue b/packages/nuxt/playground/app.vue
index 68e0c306f7..ed7ff5875a 100644
--- a/packages/nuxt/playground/app.vue
+++ b/packages/nuxt/playground/app.vue
@@ -6,6 +6,8 @@ const counter = useCounter()
 useTestStore()
 useSomeStoreStore()
 
+await useAsyncData('counter', () => counter.asyncIncrement().then(() => true))
+
 if (process.server) {
   counter.increment()
 }
diff --git a/packages/nuxt/playground/nuxt.config.ts b/packages/nuxt/playground/nuxt.config.ts
index 947ebaffc6..973b5d95a3 100644
--- a/packages/nuxt/playground/nuxt.config.ts
+++ b/packages/nuxt/playground/nuxt.config.ts
@@ -15,7 +15,8 @@ export default defineNuxtConfig({
   vite: {
     define: {
       __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
-      __TEST__: 'false',
+      __USE_DEVTOOLS__: true,
+      __TEST__: false,
     },
   },
 })
diff --git a/packages/nuxt/playground/stores/counter.ts b/packages/nuxt/playground/stores/counter.ts
index 02c82c742d..043de8610d 100644
--- a/packages/nuxt/playground/stores/counter.ts
+++ b/packages/nuxt/playground/stores/counter.ts
@@ -1,3 +1,5 @@
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
 export const useCounter = defineStore('counter', {
   state: () => ({
     count: 100,
@@ -6,6 +8,13 @@ export const useCounter = defineStore('counter', {
     increment() {
       this.count += 1
     },
+
+    async asyncIncrement() {
+      console.log('asyncIncrement called')
+      await sleep(300)
+      this.count++
+      return true
+    },
   },
   getters: {
     getCount: (state) => state.count,