No reactivity if the store is updated from a different component?

[Sjoerd82]

I'm in Vue2 with the Composition API and was expecting to have a reactive boolean or a reactive getter, but I get neither:
EDIT: Update 15/02; Turns out it actually works when setting the value within 'regular' function in the composable, but NOT when setting it from within a HOOK. Maybe something to do with context..

import { defineStore } from 'pinia'
export const useStorePage = defineStore('main', {
    state: () => ({
        isLoaded: false,
    }),
    getters: {
        cIsLoaded() {
            return this.isLoaded
        }
    },
})

Component 1 (View):

<template>
    {{store.isLoaded}}
    {{store.cIsLoaded}}
    {{isLoaded}}
</template>
import { useStorePage } from '@/stores/useStorePage'
export default {
    const store = useStorePage()
    const isLoaded = ref(false)
    isLoaded.value = store.isLoaded
    return {
        store,
        isLoaded,
    }
}

Component 2 (composable):

import { useStorePage } from '@/stores/useStorePage'
... (somewhere in the code, the isLoaded is set to true:)
const store = useStorePage()
store.isLoaded = true // this works

onMounted( async () => {
    store.isLoaded = true // does not work
})

...

I've tried various ways, this was my last attempt after learning that storeToRefs() is broken in Vue2 (#852)

[Sjoerd82]

Wow. Ok, this is weird but I found the culprit. It has something to do with having multiple stores somehow. In my Vue's main.ts I loaded a different (global) store, which overwrites my "route store".

stores/useStoreGlobal.ts:

import { defineStore } from 'pinia'
export const useStoreGlobal = defineStore('main', {
    state: () => ({
        userId: 3,
        isMobile: false,
        isOffline: null,
    }),
})

stores/useStorePage.ts:

import { defineStore } from 'pinia'
export const useStoreGlobal = defineStore('main', {
    state: () => ({
        counter: 1,
    }),
})

main.ts (simplified):

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia, PiniaVuePlugin } from 'pinia'
import { useStoreGlobal } from '@/stores/useStoreGlobal'

import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
    router,
    pinia,
    render: h => h(App),
    async created() {
        const storeGlobal = useStoreGlobal() // this is enough to trigger the behaviour.
    },
}).$mount('#app')

In the view, directly (dyamically) loaded from the router:

import { useStorePage } from '@/stores/useStorePage'
export default {
    setup(props, setupContext) {
        const store = useStorePage()
        console.log(store) // displays the GlobalStore instead !!
        return {
            store,
        }
    },
}

Pretty sure we're allowed to have multiple stores, right?
And stores can be created at route/view-level (right?)

I've been staring at this for days, maybe it's a stupid typo somewhere, but I cannot explain this at all and it feels like a bug.

[hidde-jan]

For reference: you cannot create multiple stores with the same id. The writer used ‘main’ in both files.

[Sjoerd82]

Your're right. And as I suspected, a stupid typo indeed. Case closed!