Unable to use setMapStoreSuffix for mapStores in Options API in Nuxt

[ferferga]

Reproduction

I'm not able to change the suffix used to map stores using the options API with Nuxt. Setting other suffixes renders the mapped store as undefined.

Reproduction repo (just after loading the index, in console undefined can be seen): https://github.com/ferferga/example-nuxt-2

Steps to reproduce the behavior

1. Configure Nuxt according to the template
2. Remove/change the suffix
3. Use mapStores
4. Access the store by it's id only/new suffix combination

Expected behavior

The store should work instead of being undefined

Actual behavior

The store is undefined

[ferferga]

@posva Why was this converted to a discussion? Is this not a bug or am I missing something?

How I can accomplish referencing my stores using mapStores by only using the id in Nuxt then?

Thank you very much in advance!

[posva]

You need to ensure the set store suffix function is called before your component gets mounted. In your case, you should directly import the useCartStore from ~/stores instead of ~/stores/cart

[ferferga]

Thank you very much! Wasn't able to make it work either inside the Nuxt plugin I use for defining the Pinia plugins. I'm ashamed now that it was this simple! 😅

I'm going to leave a little summary of the problem for future googlers, as I want to delete the example repo.

I have a Nuxt 2 app and I implemented Pinia using the structure used in the example repo.
As you can see, the store's index is like this:

export * from './cart'
export * from './user'

In order to change the suffix, I modifed my index to be like this:

import { setMapStoreSuffix } from 'pinia'

declare module 'pinia' {
  export interface MapStoresCustomization {
    suffix: ''
  }
}

setMapStoreSuffix('')

export * from './cart'
export * from './user'

However, when using importing the store in the components, I did it like this:

import { useCartStore } from '~/stores/cart'

However, as Eduardo mentions, simply importing it like this fixes the problem:

import { useCartStore } from '~/stores'

Make sure the exports are at the end of the document (that way, when importing in another dependency, the whole index.ts file runs before the export happens).

Thank you very much again for your quick support!