Can you make stores available in all components?

[edwh]

New to Pinia, so apologies in advance. Using Nuxt.

Is there a way that all components can automatically have access to all stores? At the moment I have some boilerplate code in a component which:

• import { useXStore } from '../stores/X'
• const xStore = useXStore()
• Returns that xStore from setup() / script setup

This code works, but would be the same in all components. Is there a way to make all of this happen automatically?

[dreambo8563]

what about provide a function which init all store there ?

export const allStore = () => {
  return {
    demo: useDemoStore(),
    counter: useCounterStore(),
  };
};

[edwh]

But you'd still have to call that inside each component, right?

I'm coming from a Nuxt2+Vuex background where this.$store is automatically present, and looking for something similar here.

I could write a global mixin or something, but I want to check I'm not missing the point.

[dreambo8563]

I didn't find related doc :(

[truci95]

I'm also coming from vuex and wanted to look for a similiar solution to this.$store but couldn't find any,
so I basically copied the behavior so I can use the store like I did in vuex.

(I'm using Vue 3 in this example.)

In the main.js I created a global variable called $store after the createApp() call.

const app = createApp(App);
app.config.globalProperties.$store = {};

that way i can access the variable through this.$store.

Then I initialized all the stores in App.vue

import {useDemoStore} from "@/stores/demo";
export default {
    mounted() {
        //init stores
        this.$store.demo = useDemoStore();
    }
}

Done. :D

After that you should be able to access the stores like in vuex via this.$store in every component.

[posva]

Setting this.$store or similar is fine for prototyping but cancels out some of the improvements pinia brings like automatic dynamic modules and especially typing and autocompletion.

One solution that works with both is using auto imports. By setting the dirs option to the folder where your stores are defined, you should be able to directly call useMyStore() everywhere needed and still benefit from TypeScript and better code splitting (dynamic modules)

[ryhn]

This method works except reactivity. Do you have any suggestions to add Reactivity to pinia Store using this method. I'm trying to change the Vuex store to pinia but there is a lot of this.$stores usage in the project.