Call Actions dynamically in a dynamic store

[marcotw]

Hi all, with Vuex namespaced stores, I can commit mutations dynamically in this way:

store.commit(storeName + "/" + storeMutationName, valueToCommit)

With a plugin in NuxtJS and this commit function on the global store variable, I can perform mutations completely dynamically.

How can I perform the same result with Pinia?

There is a function that I can use where is possible to pass as parameters the ID of the store to use, the Action name and the new value?

Thank you for the help!

[posva]

There isn't one but you could add it yourself. The biggest challenge is storing a reference to all of your useXStore functions in a map:

import { storeMap } from '~/storesMap' // <- create this file

export const useXStore = defineStore('x', ...)

storeMap.set('x', useXStore)

// storesMap.ts
export const storeMap = new Map<string, ReturnType<typeof defineStore>>()

export function callAction(id: string, action: string, ...args: any[]) {
  return storeMap.get(id)![action](...args)
}

Getting the typing right is quite more complicated but in practice, I would recommend you to not do this kind of thing because it removes the automatic code-splitting feature. Instead of storing the ids of the stores as strings, import the functions of the stores you need and call them or emit events to bubble up to a component that is aware of all of the stores and can call the action