Access global properties in Store

[parker-codes]

There is currently no documented way to access Vue root plugins, such as this.$axios or this.$router like I might do in Nuxt. I feel that this is a very common use case since the Vue plugin ecosystem is large.

Since binding this is not the way forward, can we have a way to get at the root? I could see it exposed similar to how context is in setup(). I can't think of a way to achieve backwards compatibility with the current API. I also don't see how to access it since the function is used directly (imported and called) and there's no API on the outside. This makes me think that the API would have to exist on the inside of the function much like accessing a store is done:

export async function appendFile(file: File): Promise<void> {
    const store = useFilesStore();
    store.state.all.push(file);
}

Perhaps plugins have to be defined differently in order to be accessed here. All existing plugins would either define a new composition API or a dev could define their own composition wrapper on top of any that haven't converted.

[posva]

I started working on Nuxt integration very recently and I'm coming up with ways to make the API easy to use while still allowing to preserve types. Right now, it's a bit hard to get things working with SSR with Nuxt, but it will change once I release a plugin for it.
Since you have a function that returns the store, you can call it anywhere and use the other plugins:

Things like axios should just be directly imported and in general this should be the easier way in the future if you want to keep typings and autocompletion no matter the way it's done. The router can also be imported.

That being said, it may be interesting to inject the context directly on the store when using Nuxt e.g. store.$nuxt.axios, which would be automatically typed. The thing that worries me is that I'm not sure I can inject the context in all situations, it's something that I will have to dig

[parker-codes]

Yeah, that makes sense. The reason I stay away from directly importing axios and others is that I lose the shared config OR I have to define the config twice, which could lead to issues if I remember to update the baseUrl in one but no the other.

I do like the simplicity of accessing it via store.$nuxt. I don't know what goes into making this work with SSR and I really appreciate all of the work you put into this.

[posva]

This has been implemented and documented in #416 and will be available in the next release

[Eliophot]

Hello, I don't find the documentation about this...

[posva]

The doc is in the Nuxt page: https://pinia.vuejs.org/ssr/nuxt.html#using-the-nuxt-context-in-stores