Accessing other stores within a store with a stores option

[b-strauss]

What problem is this solving

We are currently using Vuex and are evaluating switching to Pinia. We have 10+ stores with different responsibility. Many of these stores use other stores as dependency in a lot of places. There is one store that calls the getters of another store in almost every one of it's own getters. As far as I understand it, with pinia you have to call the createStore function in every getter where you want to use the other store, otherwise the store initialization would not work. This would result in writing the same line of code over and over again in all places (example: const user = useUserStore();).

Proposed solution

I propose an additional option to define which stores you want to use in the current store. This would also have the benefit that it would nicely list all the store dependencies in one place.

export const useCartStore = defineStore('cart', {
  stores: [useUserStore, useDataStore],
  getters: {
    myData() {
      return {
        name: this.userStore.fullname,
        items: this.dataStore.itemsForUser(this.userStore.id),
      };
    },
  },
});

[posva]

This is similar to the stores option mentioned in Vuex 5. Given you can write a store with

defineStore('b', () => {
  const userStore = useUserStore()

// use userStore directly
})

I'm not sure adding such thing is worth since it does make the types heavier.

For your specific case, note you could use a pinia plugin to make the store available everywhere

[posva]

I'm realizing the stores option is not mentioned in the rfc but it's similar to what I updated in your code example.

It could also be

stores: { userStore: useUserStore, dataStore: useDataStore },

[b-strauss]

@posva is this still being considered? I'm not sure what the status of vuex 5 is now that pinia is an official vuejs package.