setMapStoreSuffix() not working

[syntheticminds]

Reproduction

https://github.com/syntheticminds/pinia-bug

Steps to reproduce the bug

Open index.html

Expected behavior

Value: 123 seen in browser. No errors in console.

Actual behavior

Blank page. Error in console caused by this.counter_store being undefined.

Additional information

I suspect this is to do with Laravel Mix (Webpack) messing with setMapStoreSuffix()'s scope.

[posva]

Maybe it is related to laravel-mix. Have you tried moving the setStoreSuffix() directly to your main.js? You have to make sure setStoreSuffix() is called before any useMyStore(). e.g. call it right next to app.use(pinia)

[syntheticminds]

No luck. JS isn't my first language so I'm afraid I can't give much insight into the cause.

Obviously I can work around this but I thought you might like to know the way settings are injected may be incompatible with some build tools.

[3zzy]

Maybe it is related to laravel-mix. Have you tried moving the setMapStoreSuffix() directly to your main.js?

Can confirm this works.

[syntheticminds]

Can confirm this works.

Still no luck with my test code: https://github.com/syntheticminds/pinia-bug

[FVolral]

I had the same problem. Figured out that you must use setMapStoreSuffix() where you will use mapStores. No sure if this is expected. It would be great to be able to set that suffix in main.js only once. Here is the repro on codeSandBox where setMapStoreSuffix is working : https://codesandbox.io/s/pinia-setmapstoresuffix-bug-repro-lbfzit?file=/src/App.vue

[RedShift1]

I found that instead of relying on setMapStoreSuffix, you can also do something like this in your Vue 2 component (using options API):

const store = defineStore('$store2', { ... });

export default
{
    computed:
    {
        $store2() { return store(this.$pinia) }
    },
    ...
}