Initialising/Proxying a Vuex Store to a Vue wrapped WebComponent

I am using a Vue Web Component Wrapper for web components within my rich text editor.
I can insert these webcomponents into my content.
My main application is a Vue SPA with its own store, is it possible to share this $store at runtime with these wrapped webcomponents,
I am exposing the store as a global on the window.$ = store
Then on the created hook of the webcomponent i am setting

 this.$store =  window.$
this.$root.$store =  window.$

This works, but when I use a getter within my computed prop its not reactive, any thoughts how i could get this to be reactive

   isEditMode() {
      return this.$store
        && this.$store.getters
        && this.$store.getters['nav/isEditMode'];

Instead of adding the store to the main window, import the store to the component itself. Usually we import the store to main.js (it’s automatically scaffolded like this in Vue CLI), but seeing as the web component is self encapsulated, you need to import the store into the component.

So you end up with something like this


import store from '../store/';

export default {
  // ...
  // ...
1 Like

Thx, this is what i had done in the end, really appreciate your response.