Accessing Vuex Store from vue-custom-element

[RBrNx]

I am trying to use the Vuex store in some of my vue-custom-elements. I have read #90 and #91 and followed the directions you gave on them, however after trying it in my own application I cannot seem to get it to work.

I have set up a CodeSandbox that replicates my issues as you can see, is there something I am missing?

https://codesandbox.io/s/pp9m5r368x

[karol-f]

It's working - just correctly export store from store.js

const store = new Vuex...
export default store;

[RBrNx]

Thank you! I'm an idiot.

[RBrNx]

Hi Karol, apologies for re-opening this but I could not get the store to appear correctly in one of my custom elements, spent the whole day pulling my hair out!

However I have managed to get a simplified test version producing the same problem that I am seeing. I'm not sure if the error is with your wrapper or me missing something (which is definitely possible).

You can see in https://codesandbox.io/s/5kr4lr5xq4 that the regular Vue component GridItemWrapper and its child Component GridItemSingle both have access to the Vuex Store. However if I try to add (using the Add Grid Item button) a GridItemSingle that has been initialised with the vue-custom-element wrapper, it does not have access to the store.

If I comment out the lines

    <grid-item-single v-if="itemsize == 'Single'" id="item-single" :data-id="itemid">
        <slot></slot>
    </grid-item-single>

from GridItemWrapper.vue and then pres the Add Grid Item button, the vue-custom-element will have access to the store.

Do you have any ideas whats going wrong?

[karol-f]

I don't know why but GridItemSingle object was changed so I made sure that it's always the same by adding:

Vue.customElement("grid-item-single-custom", { ...GridItemSingle });

Take a look at https://codesandbox.io/s/wonlv9v218 (BTW I improved adding components to page - don't use plain JS as it's not neede in that case).

[RBrNx]

@karol-f Thank you for your help! Can I ask though, how does the { ...GridItemSingle } syntax stop the object from being changed?

Unfortunately I do need to use plain JS in my actual application as I am using the Muuri library which requires elements to be added via its .add() function and the DOM, so I wanted the test case to be representative of how I am using your vue-custom-element wrapper.

Again, thank you, you've been a great help!

[karol-f]

Hi, { ...GridItemSingle } or Object.assign({}, GridItemSingle) just change object reference and create new object with same properties. Regards.