Vuejs and Webpack: Why is store undefined in child components

问题

I am using Vuejs with Webpack.

Here's store.js:

import Vuex from "vuex";

export default new Vuex.Store({
    state: {
        count : 0
    },
    mutations: {
        increment (state) {
            state.count++
        }
    }
});

Here is my app.js:

"use strict";

import Vue from 'vue';

window.Vue = Vue;
import MyComponent from './MyComponent.vue';
import store from './store.js';

window.App = new Vue({
    el : '#my-app',
    store,
    components : {
        'my-component' : MyComponent
    }
});

Here is the script from MyComponent.vue:

export default {
    computed : {
        count() {
            return this.$store.state.count;
        }
    },
    mounted() {
        console.log(this.$store)
    }
}

Any reference to this.$store in my component is undefined. Why?

回答1:

You need to install the Vuex plugin somewhere to allow Vue components to access the store. As Pavan noted, to do this you must include the following lines somewhere (in your app's index.js, in your store.js etc) before you create your Vue instance:

 import Vue from "vue";
 import Vuex from "vuex";

 Vue.use(Vuex);

This tells Vue what to do with the store instance when you create the instance, which will make it available under this.$store in your components. This also ensures that Vuex also knows how to interact with Vue. Without it, you will not be able to use Vue and Vuex together properly.

Regarding your later answer, you can export the store instance just fine, and import it into your index.js, router config etc. For example:

store.js:

 import Vuex from "Vuex";

 export default new Vuex.Store({ /* store config */ });

MyComponent.vue's <script> block:

export default {
    mounted() {
        console.log(this.$store); // will log the store instance
    }
}

index.js:

import Vue from "vue";
import Vuex from "vuex";

import store from "./store";
import MyComponent from "./components/MyComponent.vue";

Vue.use(Vuex);

const app = new Vue({
    el: "#my-app"
    store,
    components: { MyComponent },
    // any other options as needed
});

回答2:

You should add these 2 lines in your store.js

import Vue from "vue";

Vue.use(Vuex);

There's no way you can instantiate store without actually saying the second statement above. So, you need to import Vue in your store.js

回答3:

OK, so the reason I wanted to go down this path was to separate the store code from the rest of the application.

I have managed to do that by exporting a default object from store.js, where that object is only the configuration for the store (i.e. not a store instance). I then instantiate the store in my app.js, using the imported configuration.

I will leave this answer open for a few days in case someone wants to provide a way to export/import the instance itself.

来源：https://stackoverflow.com/questions/51254983/vuejs-and-webpack-why-is-store-undefined-in-child-components

标签

Vue.js

vuex