Using vuex inside a manually-mounted vue component

Question

I'm manually mounting a component to a dynamic element using Vue.extend like this:

import Vue from 'vue';
import MyComponent from 'MyComponent.vue';

const MyComponentConstructor = Vue.extend(MyComponent);
const MyComponent = new MyComponentConstructor({
    propsData: {
        foo: 123,
    },
}).$mount('#mount-point');

When I manually mount a component in this way, I can't use vuex inside MyComponent.vue.:

// (inside MyComponent.vue)
this.$store.commit('setSomething', true);

I get this:

Uncaught TypeError: Cannot read property 'commit' of undefined

Of course vuex is set up and working fine in the other normal components. Is there something I can pass to the constructor to get it to work?

Bert · Accepted Answer · 2017-06-09 17:57:55Z

13

Pass the store as part of the options to the constructor.

import store from "path/to/store"

const MyComponent = new MyComponentConstructor({
    store,
    propsData: {
        foo: 123,
    },
}).$mount('#mount-point');

answered Jun 9, 2017 at 17:57

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DMack Over a year ago

Wow, simple as that! Thanks! It looks like I can also pass store: this.$store from the parent component so I don't even have to import the store!

Awoyemi Afeez Damola · Accepted Answer · 2020-10-02 15:09:57Z

5

I'm a little late to the party, still felt the urge to chime this in. The best approach I've found is to pass the parent key as the actual parent if you have access to it (it'll be this on the mounting parent usually). So you'll do:

const MyComponent = new MyComponentConstructor({
    parent: this,
    propsData: {
        foo: 123,
    },
}).$mount('#mount-point')

You'll have access to other useful globals (like $route, $router, and of course $store) within the mounted component instance. This also properly informs Vue of the component hierarchy making MyComponent visible in the dev-tools.

answered Oct 2, 2020 at 15:09

Awoyemi Afeez Damola

511 silver badge2 bronze badges

1 Comment

Lasy Over a year ago

This is a better approach because, in most case, we just want to create a new child component rather than a new App. By using parent prop, the new component will extends all features we added to App.

Collectives™ on Stack Overflow

Using vuex inside a manually-mounted vue component

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related