Circular dependency of stores not working

[Thomas-1985]

We want to migrate from Vuex 3.5 to Pinia and have a problem with stores, which call each other.
We have a rootStore and an newStore in Pinia.

In an action of the rootStore, we try to use const newStore = useNewStore();
Otherwise in an action of the the new store, we try to use const rootStore = useRootStore();

This will not work, in the root store we get the error TS2448: Block-scoped variable 'useNewStore' used before its declaration.
I guess this is because in the defineStore calls, each other function is called, creating a circular dependency.

The pinia introduction says: "You can even have circular dependencies of stores"

Also we have read that this is possible here: https://pinia.vuejs.org/cookbook/composing-stores.html
But the example is using a setup() function for the stores, we use the same option structure as vuex (with data, getters, actions and so on) with the options api (with Vue 2.7)

How can we solve this? Thanks for your help.

[guyaumetremblay]

@Thomas-1985 Did you solve this? I have the same scenario but not the same error. Mine is : ERROR in Circular dependency detected ! The compiler doesn't like the circular dependency of the imports...

[pavitra-infocusp]

Try using lazy imports

[renatodeleao]

Note

EDIT: 🤦 i've realized that the issue is not with pinia, but just regular javascript circular references, you can't obvious mutually import modules this way. Solving circular deps issues in big apps is a non-trivial problem and there's plenty of articles around. I've found a workaround by using a pinia plugin that exposes a $stores property via the pinia instance private property that holds the map, but I don't advise doing this as it can break on version upgrades. Probably better to architecture your stores differently. Hopefully some smarter folks will post here their approaches.

Have the same issue! Here's the fork of the the pinia todo app in the pinia-playground

• Both user and todos store call each other.

• I've tried using a barrel file for the stores imports, as well but the result is the same.

• I've tried same demo using setup stores syntax

Anyone figured it out?

Cheers ✌️

[renatodeleao]

Follow-up.

I'm migrating a very large app from vuex to pinia that does have a circular references between two modules (now stores). In vuex, we can access other modules via rootState/rootGetters exposed in getters/actions as function arguments since each module is merged into a global single store, something we don't have publicly in pinia AFAIK — we do have a private Map of the registered stores in the pinia instance, but it's undocumented.

it's important to note that, as always in programming, we can do things differently, but the point here is that docs say that we can have circular references between stores but the docs demo-ed way is if the two stores are in the same file which is a bit impractical in a real world project.

Demo

DEMO APP.

The demo it's slightly more advanced "todos" app, a todos store with a users store that cross-reference each other. In this app I introduce the concept of actions side-effects in the stores (the ones that required cross-access). This kind of side-effects are very common in ORMs that work with normalised state (like pinia-orm), but for the sake of demo simplicity we did it manually.

1. Action: assigned a todo to a specific user.
   Side-effect: needs to see if user is "allowed to take that task" before actually doing it (the demo limits 3 tasks per user)
2. Action: Destroying a user.
   Side-effect: un-assign all user’s tasks before removing it.

The way i've workaround it for the migration sake is via plugin, dangerously accessing the registered stores Map in the pinia instance private property. The other major downside of this approach is that you need to call explicitly call useUsersStore() even if you just wanted to call useTodosStore in template, because that's how pinia registers the store in the singleton, but that can be workaround again with a plugin.

Hope it helps someone!
Also hope that a better programmer finds this and propose a better way.

My other alternative way was dependency injection useStoreA(useStoreB), useStoreB(useStoreA). W

//storeA.js pseudo-code

export function useStoreA = (useStoreB) => {
   return defineStore('a', () => {
     // access dependency store here
     const storeB = useStoreB()
   })()
})

Cheers!

[CyberAP]

@renatodeleao I solved it with a plugin. Do not use this as a regular pattern.

// plugin.js
export const globalAccessorPlugin = (context) => {
  context.store.tryStore = (storeName) => {
    const anotherStore = context.pinia._s.get(storeName);

    if (!anotherStore) {
      const hookName = `use${storeName.charAt(0).toUpperCase() + storeName.slice(1)}`;
      throw new ReferenceError(
        `Store '${storeName}' doesn't exist. Ensure you have called ${hookName}.`,
      );
    }

    return anotherStore;
  };
};

// store.js
import { defineStore } from 'pinia';

export const useMyStore = defineStore('myStore', () => {
  getters: {
    derived() {
      return this.tryStore('anotherStore').anotherState + 1;
    }
  }
});

Don't forget to register it:

createPinia().use(globalAccessorPlugin)

[renatodeleao]

Thanks for the reply @CyberAP. Yeah that's how I end up solving this too — for the demo i did very barebones one with zero safeguards.

I've tried posting on the #pinia vue discord channel to see if I got "safer" approaches from the community but got a grand total of 0 😅

I feel like these mutual ORM-like side-effects between stores is pretty common/standard in apps that use optimistic UIs, so I would like to see some guidance in docs on the "we have circular references between stores" matter.

Also tried to dig into the pinia-orm codebase to see how they've achieved it, but couldn't fully grasp it. I think they register all stores into the entities store and use that to proxy access it becomes the root store with access to all others.