Access pinia store from routes file

Question

I am building a breadcrumbs component with Vue 3, Vue Router, and Pinia. I use a breadcrumbs meta key on my routes with a label and parent attribute. The component generates an array by resolving the parent routes recursively using router.resolve() and then create the component markup from this array. I use a pinia store and I want to dynamically generate the meta.label property on my routes file using attributes stored in the pinia store.

If I import the pinia store on the routes file like this:

// routes file
import { useRentalStore } from "@/stores/rentalStore";

const rentalStore = useRentalStore();

const routes = [
  // extract from routes array
  {
    path: ":equipment",
    name: "rental-show",
    component: ShowRentalView,
    meta: {
      breadcrumbs: {
        label: () => rentalStore.rental.label,
        parent: "rental-index",
      },
    },
  },
];

I get the following error: "getActivePinia()" was called but there was no active Pinia. Did you forget to install pinia? const pinia = createPinia()

I tried passing the pinia instance from the main entrypoint main.js

// main.js
const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.use(router)
//...
export { pinia }

// routes file
import {pinia} from '@/main.js'

const rentalStore = useRentalStore(pinia);

But this still won't work. I used a similar approach in Vue 2 with Vuex and the above worked with Vuex but it is not working with Pinia.. The above returns the following error message: Cannot access 'pinia' before initialization.

Any idea how to access the pinia store from the routes file? The pinia docs recommend to defer calls of useStore() by placing them inside functions that will always run after pinia is installed, but the parent route component will not run when the child component navigation is active.

Answer 1

Notice: use the approach from the section at the end instead of actually using this approach. It is for explanation only, and should only be used when there is no other/better way.

You need to have created the pinia object before initializing the router. Otherwise there's a bit of a circular dependency of the main file importing the router, which imports the main file...

The solution is to use a separate file for initializing Pinia, and import that. The best is probably as the index file of the stores directory. For example, use this as stores/index.js:

import { createPinia } from "pinia";

const pinia = createPinia();

export default pinia;

(This also provides a contained location to apply Pinia plugins, if you use any.)

Then, in your router file, import the Pinia instance from this and pass it to the store function:

import pinia from "@/stores";
import { useRentalStore } from "@/stores/rentalStore";

const rentalStore = useRentalStore(pinia);

// As before...

And, in your main file, import the Pinia instance and use that:

// ...

import pinia from "@/stores";

const app = createApp(App)

app.use(pinia)
app.use(router)

---

Usually, this is an anti-pattern.

The better choice is to "use" the store where it is used.
For example:

import { useRentalStore } from "@/stores/rentalStore";

const routes = [
  // extract from routes array
  {
    path: ":equipment",
    name: "rental-show",
    component: ShowRentalView,
    meta: {
      breadcrumbs: {
        label: () => useRentalStore().rental.label,
        parent: "rental-index",
      },
    },
  },
];

As long as the store function is called after the Pinia instance has been installed with app.use(pinia), Pinia will automatically use that instance; it only needs to be passed in if the store function is called before the Pinia instance is installed.

The docs have a short section on this: Using a store outside of a component | Pinia.

Answer 2

Pinia creates store functions instead of store instances in order to avoid early instantiation. When used outside a component, useRentalStore should be called in a place where a store is used:

...
label: () => useRentalStore().rental.label,
...