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

我正在将Vuejs与Web包一起使用

下面是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)
    }
}

---

“我的组件”中对该.$store的任何引用都未定义。为什么？

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

我通过从

store.js

导出一个默认对象来实现这一点，其中该对象只是存储的配置（即，不是存储实例）。然后，使用导入的配置在我的

app.js

中实例化存储

---

我将把这个答案保留几天，以防有人想提供一种方法来导出/导入实例本身。

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

从“Vue”导入Vue；
Vue.use（Vuex）您需要在某处安装Vuex插件，以允许Vue组件访问存储。正如Pavan所指出的，要做到这一点，您必须在创建Vue实例之前在某个地方（在应用程序的
index.js
中，在
store.js
等中）包含以下行：

从“Vue”导入Vue；
从“Vuex”导入Vuex；
Vue.use（Vuex）；

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

关于后面的答案，您可以很好地导出store实例，并将其导入到
index.js
、路由器配置等中。例如：

store.js
：

从“Vuex”导入Vuex；
导出默认的新Vuex.Store（{/*Store config*/}）；

MyComponent.vue
的
块：

导出默认值{
安装的（）{
console.log（this.$store）；//将记录存储实例
}
}

index.js
：

从“Vue”导入Vue；
从“Vuex”导入Vuex；
从“/store”导入存储；
从“/components/MyComponent.vue”导入MyComponent；
Vue.use（Vuex）；
const app=新的Vue({
el:“我的应用程序”
商店，
组件：{MyComponent}，
//需要时有其他选择吗
});
在官方Vue Discord服务器上多次向OP解释了这一点，但拒绝接受使用
Vue.use（）
。不幸的是，OP将忽略您的问题。@user9993我知道，但在服务器上OP似乎在寻找一个解释，说明为什么它是必要的，除了“它就是这样”之外，没有人提供其他解释。OP似乎对出口的运作方式也有一些误解，我试图解决这个问题。