Pinia scoped stores

[hassassin100]

Hello, we're using Pinia at work and for our use cases so far, we have two types of stores.

1. What we've termed 'global' stores which are very similar to the ones seen in various examples, where we are storing some flattened state, like an array. E.g.

export const useTestGlobalStore = defineStore("test-global", () => {
  const testThings= ref([]) as Ref<Array<Test>>;
  const getTestThings= computed(() => testThings.value);

  async function initStore() {
    testThings.value = await getTestThingsApi();
  }

  initStore();

  return {
    getTestThings,
  };
});

This type of store is very straightforward to initialise. When multiple independent components use the store, we can guarantee that getTestThingsApi will be called once and consumers don't have to worry about calling a fetch action every time they use the store.

2. The second store is more complicated and is what we've termed a 'scoped' store, where instead of storing flattened state, we need to store a Map of things. E.g.

export const useTestScopedStore= defineStore("test-scoped", () => {
  const scopedThings= ref<{ [scopeId: number]: Array<Test> }>({});
  const getScopedThing= computed(() => (scopeId: number) => (scopedThings.value[scopeId] || []));

  async function fetchScopedThing(scopeId: number) {
    if (scopedThings.value[scopeId]) {
      return;
    }

    const debounced = debounceAction(getScopedThingApi);
    Vue.set(scopedThings.value, scopeId, await debounced(scopeId));
  }

  return {
    getScopedThing,
    fetchScopedThing,
  };
});

This is okay, however our aim is to try and achieve the same goals we did with the 'global' store:

• Fetch once during store initialisation, so that consuming components don't have to worry about fetching every time they use the store.
• Get a simpler definition for the Pinia store, instead of having to deal with a Map data structure in the store itself.
• This means that every store we make behaves the same, i.e. we don't have to fetch for some and others no.

A proposal that came up to solve this was allowing for multiple instances of the same store (when constructing a 'scoped' store)
Here is a working example to demonstrate this.

Whilst it does make writing the store much easier and addresses our concerns, it seems like it deviates a little from the standard guidance we have seen in Pinia docco. In your opinion, is this valid use of Pinia? If not, would you recommend another way we could use Pinia to achieve the aforementioned goals? Thanks in advance.

[episage]

I struggled with the exact same problem for a complex web app and it seems that Pinia does not offer a solution for this very real problem.

I solved it by utilising Dependency Injection framework that offers scoped registration scope.