The value of this.$store is undefined in the child component when using Vuex

[rostamiani]

I can access this.$store from layout component but it's undefined in users-module component as a child of Layout component

This is the main.ts:

import store from './store'
Vue.use(VueCustomElement)
Vue.customElement('skyroom-layout', new Layout({ store, i18n }).$options)

I crated a sample code here: https://github.com/rostamiani/vuejs-store-error

And asked this question in Stack overflow too: https://stackoverflow.com/questions/62369231/the-value-of-this-store-is-undefined-in-the-child-component-when-using-vue-cust

[karol-f]

Hi, I can't check it right now but why You are using this.$store and not just export store from some file and import it whenever you want it?

[rostamiani]

Thanks a lot You saved my day

But is it a way to pass parameters to the component like what I did? Can I access this.$store anyway? I have exactly the same problem with vue-i18n package too.

[roberttolton]

@rostamiani I guess you could do if you really wanted:

Object.defineProperty(Vue.prototype, '$vuexStore', {value: store});

I'm fairly sure you can't define just '$store' because a conflict warning gets thrown.

But I think importing the store into each component is probably the better way.