what pattern should be used to chain requests between stores?

[iambumblehead]

Hello I'm looking for a pattern of using pinia that will provide data composed from sequential requests. Something that can be used for many scenarios and can be used to order many requests that might be needed for the page.

For example, if this sequence of requests is needed,

1. user = await getSelf(sessionToken)
2. studios = await getStudios(user.id)

Currently, I'm using three files,

• useSession.js, gets and refreshes the session token
• useSelf.js, gets user details associated with session token
• useStudios.js, gets list of data associated with the user

Should each pinia store import and use other pinia stores it depends on? If so, should the imported store be loaded inside of an action function or should it be loaded inside the setup function of the depending store? How do we ensure that the data are optimally reactive, so that scripts using the store do not need to manage cumbersome lifecycles? Should the stores be kept separated and then loaded into the setup function of a page component, where the setup function calls the action of each store with data from the previous store?

Generally what pattern is recommended here --to compose requests sequentially from data returned by previous requests?

Perhaps the information I am looking is present on the internet, but information I have found on this topic offer glossy, facile solutions, or the topic is skipped over with language like "many ways are provided to achieve that, as you become advanced" blah blah

---

Currently, the setup function of my top-most page component uses something like this. Before trying different approaches I'm interested to know what pattern is recommended for this common scenario,

setup () {
  const useSelf = storeToRefs(useSelf());
  const useStudios = useStudios();

  watch(() => useSelf.user.value, () => {
    useStudios.fetchStudiosForUser(useSelf.user.value.id);
  });

  return {
    useSelf,
    useStudios
  }
}

So far, one of the better discussions I have found that covers this topic is here https://blog.logrocket.com/complex-vue-3-state-management-pinia/ however I'm interested in more suggestions that cover this area specifically

The documentation here https://pinia.vuejs.org/cookbook/composing-stores.html doesn't explain usage implications or how data will behave --for example, if a store is used inside of a 'getter' function, does the getter function reactively update the returned value when the store value changes?

the example here composing the useX and useY stores seems over-trivial and If we were translate the example to the "real" use-case example above, the useSelf store would set the "userId" value on the useStudios store, which is reverse intuitive --the useStudios store should depend on the useSelf store and not the other way

---

edit
this discussion is useful #794

now the useStudios store uses an action with the useSelf store and watch functions inside of it and that is working well enough