Docs: Nuxt 2 --> 3 #2766
Docs: Nuxt 2 --> 3 #2766
Conversation
Replace tip that was relevant to Nuxt 2 with the equivalent syntax for Nuxt 3.
✅ Deploy Preview for pinia-official ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for pinia-playground canceled.
|
|
|
||
| ```js | ||
| import { useStore } from '~/stores/myStore' | ||
| const store = useStore(useNuxtApp().$pinia); |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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)
}
}There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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).
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
| @@ -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). | |||
There was a problem hiding this comment.
| 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). | |
| If you want to use a store outside of `setup()`, remember to pass the `$pinia` instance to `useStore()`, for the reasons alluded to [here](https://pinia.vuejs.org/core-concepts/outside-component-usage.html#SSR-Apps). |
Replace tip that was relevant to Nuxt 2 with the equivalent syntax for Nuxt 3.
I'm not sure whether this is in fact the intended usage pattern / syntax for Nuxt 3, but I think what I've written is an improvement over the status quo, since at least it works.
If this PR results in, or is deemed as, a definitive answer to this question, it may resolve that discussion.