Question

我在Webpack中使用Vuejs。

这是store.js：

import Vuex from "vuex";

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

这是我的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
    }
});

这是MyComponent.vue中的脚本：

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

在我的组件中对this.$store的任何引用均未定义。为什么？

Answer 1

您需要在某个地方安装Vuex插件，以允许Vue组件访问商店。正如Pavan指出的，要做到这一点，您必须在创建之前之前在应用的index.js，store.js等位置添加以下行您的Vue实例：

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

 Vue.use(Vuex);

这告诉Vue在创建实例时如何处理商店实例，这将使其在组件中的this.$store下可用。这也确保Vuex也知道如何与Vue交互。 没有它，您将无法正确同时使用Vue和Vuex。

关于以后的答案，您可以可以导出存储实例，然后将其导入到index.js，路由器配置等中。例如：

store.js：

 import Vuex from "Vuex";

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

MyComponent.vue的{{1}}块：

<script>

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

index.js

Answer 2

您应该在store.js中添加这两行

import Vue from "vue";

Vue.use(Vuex);

没有实际说出上面的第二条语句，就无法实例化存储。因此，您需要将Vue导入store.js

Answer 3

好的，所以我想走这条路的原因是将商店代码与应用程序的其余部分分开。

我设法通过从store.js导出默认对象来做到这一点，其中该对象只是商店的配置（即不是商店实例）。然后，我使用导入的配置在我的app.js中实例化商店。

如果有人想提供一种导出/导入实例本身的方法，我将保留几天的答案。

Vuejs和Webpack：为什么在子组件中未定义存储

3 个答案: