docs: fixes

diff --git a/packages/docs/ssr/nuxt.md b/packages/docs/ssr/nuxt.md
index c53d28fb4a2d2e32ae1d089c049332533deda6d8..a581887b722c885b9551a122f0376664f7f9e9d1 100644 (file)
--- 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 68e0c306f7a40e39c411b254db911ed589074f45..ed7ff5875aa0d755621a7e56726dc653e9d86fb6 100644 (file)
--- 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 947ebaffc6394938581a59053981ef1029e26888..973b5d95a3b93adea555813b994005e0ff01ff21 100644 (file)
--- 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 02c82c742dd5cf09ba1af2b5628ddc281d4df2ea..043de8610dbd805d5f740c869325900fe17570b7 100644 (file)
--- 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,