Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Nuxt 2 --> 3 #2766

Merged
merged 3 commits into from
Nov 28, 2024
Merged

docs: Nuxt 2 --> 3 #2766

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7650f2f
Update nuxt.md
david-mears-2 Sep 5, 2024
986636a
Apply suggestions from code review
posva Nov 28, 2024
1847d7d
refactor: changes
posva Nov 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions packages/docs/ssr/nuxt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,16 +62,17 @@ await useAsyncData('user', () => store.fetchUser().then(() => true))

::: 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()`:
If you want to use a store outside of `setup()`, remember to pass the `$pinia` object to `useStore()`, for the reasons alluded to [here](https://pinia.vuejs.org/core-concepts/outside-component-usage.html#SSR-Apps).
posva marked this conversation as resolved.
Show resolved Hide resolved

```js
import { useStore } from '~/stores/myStore'
const store = useStore(useNuxtApp().$pinia);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is still problematic because of teh usage of useNuxtApp(). So maybe, adapting the example to something else where the context is not available and this is needed, is better. Or maybe, specify that the example below is Nuxt 2

Copy link
Contributor Author

@david-mears-2 david-mears-2 Sep 6, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the whole of Nuxt 3 is a place “where the context is not available”, until you call useNuxtApp(), which is the Nuxt 3 equivalent of context https://nuxt.com/docs/guide/going-further/nuxt-app (eta I fixed that link)
So I think whenever a pinia store is used outside of a setup, it’s necessary to have passed it the pinia instance found on the Nuxt app instance - right?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Then maybe this is just not longer needed, only in some more convoluted examples like lazy invocation in a plugin

function nuxtPlugin() {
  const nuxt = useNuxtApp()
  function something() {
    useStore(nuxt.$pinia)
  }

}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there someone we can ask? It seems important to clarify, since I read elsewhere in the documentation that

you will have to pass the pinia instance to useStore(). This prevents pinia from sharing global state between different application instances.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The existence of the tip implies to me that the module isn’t automatically passing the pinia instance to the store, except in the setup function.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there someone we can ask?

I think you are already asking the right person 😅

These parts of the docs could be updated. The different is a little bit more subtle, as it works now inside navigation guards and other parts of the application since app.runWithContext(). The nuxt function also follows this rule BTW. Feel free to give this a try if you want

Copy link
Contributor Author

@david-mears-2 david-mears-2 Sep 6, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks. I'm just very confused about all of this. The existing documentation made me believe I needed to do something to prevent Cross-Request State Pollution when using a pinia store inside an onMounted callback. I'm not sure if you are saying that's true or false, or how one can do it in Nuxt 3 (given you say the use of useNuxtApp() is problematic).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't call useStore() within onMounted, just call it outside, and consume the store within onMounted().
You cannot useNuxtApp() anywhere (as stated in the docs), only in places where there is Vue injection context (a rather implicit concept), in other words, within setup and composables and other explictely mentioned places (because they are injection context aware) like stores, middleware, plugins, etc

Copy link
Contributor Author

@david-mears-2 david-mears-2 Sep 6, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't call useStore() within onMounted, just call it outside, and consume the store within onMounted().

That is what my example / diff does. I call useStore (and useNuxtApp) in the setup function, and store.doAction() in the onMounted().

I don't believe I have enough context about Nuxt and Vue to be able to help complete this documentation, but I thank you for your kind responses.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, you don't need to pass the pinia instance within setup. I assumed the code sample was outside of setup() and that onMounted() was a mistake there. I will rework the example when I can but anybody should feel free to give it a try


export default {
asyncData({ $pinia }) {
const store = useStore($pinia)
},
}
onMounted(() => {
if (window.innerWidth < 900) {
store.doAction()
}
});
```

:::
Expand Down