mapStores: allow store name remapping

[Ilanaya]

Current mapStores implementation spreads passed stores ids in the component's computed field. This behavior might be inconvenient in case of dynamic store id.

In my case store id is usually may be formed like here:

defineStore('screenName_storeName', store)()

or even

defineStore(`${this.namespace}_store`, store)();` // where namespace is `computed` or `prop`

This allows better store control when the same widget is reused on the page but it needs to store different data.

The issue is - passing stores with complex ids to mapStores results in complex computed properties and it is painful to access them, e.g. if I do something like this:

const auth = defineStore(`mainScreen_authManager`, auth);
...mapStores(auth)

Accessing auth gonna be this.mainScreeen_authManager which is ridiculous.

As a workaround we split such stores into separated computed properties:

computed: {
   authManager() {
     return defineStore('mainScreen_authManager', localStore)();
   },
}

Which works like a charm but results in some "boilerplate" code when I need to register three and more stores in such a manner.

As a proposed API I think the best posible variant is to allow passing an array instead of useStore function in mapStores, where the fisrt element is the desired name:

computed: {
   ...mapStores(defaultStore, ['storeName', dynamicStore])
}

Looks like this won't break anything and is not hard to implement.

Do someone encountered this problem? Is there a chance to something like the mentioned solution would be implemented in the pinia codebase?

[posva]

The typings of mapStores() is a bit complex but the code isn't:

export function mapStores<Stores extends any[]>(
  ...stores: [...Stores]
): _Spread<Stores> {
  return stores.reduce((reduced, useStore) => {
    // @ts-expect-error: $id is added by defineStore
    reduced[useStore.$id + mapStoreSuffix] = function (
      this: ComponentPublicInstance
    ) {
      return useStore(this.$pinia)
    }
    return reduced
  }, {} as _Spread<Stores>)
}

I think one can refactor this to cater to their personal preferences because I feel like adding an extra API to handle names will either be verbose by being more explicit:

mapStores([useDefaultStore, { store: useOtherStore, name: 'customName' })

or too implicit and easy to mess up:

mapStores([useDefaultStore, [useOtherStore, 'customName'])
// or was it ['customName', useOtherStore]?

[gllinzbk1]

Has this feature been implemented in a certain version?

[Ilanaya]

@posva Yeah, I agree with your points about explicit/implicit implementations, but I'll try to convince you one last time :)

1. Most of the time users won't need to use proposed API, but when store renaming is needed it could be really pleasant to find out that this is supported out of the box.
2. IMHO, right now using mapStores is like having a phone book where you can only add phone numbers without ability of aliasing them with human-readable names (I mean, when you need to add your friend's phone you'll have to add e.g. +33-88125673 in you address book not "John": +33-88125673)
3. When you are reading about $id in the docs it is said that it must be unique, not descriptive or conveniet to use or smth. IMHO, unque values are not the best for naming things, so there should be some way of customization.

As a proof of concept I made experimental implementation here (tests included).

Btw, did you suggest to implement something like global helper funtion on the project level to map stores in computed fields or is there a builtin API in pinia for extending/replacing mapHelpers which I missed?

[gllinzbk1]

@maIIady @posva

In nuxt3, how does pinia get a store by ID，This function can be implemented？

export const registerStore = (category_id) => {
  return category_id = defineStore(category_id, {
    state: () => ({
    products: [],
    allTags: [],
    }),
    getters: {},
    actions: {}
  })
}

//-------------------------use layer1

const productStore = registerStore(category_id)();
productStore.products =['a','b','c'....]
productStore.allTags =['a','b','c'....]

//----------------------get,maybe,i have many layers,just first layer set data,others layer just get store by id
how to get a store by ID?
like: getstore(category_id)

The purpose is to store different categories of data in different stores