this.$store 未在组件中定义答案

【问题标题】：this.$store not defined in componentthis.$store 未在组件中定义
【发布时间】：2020-03-03 10:24:54
【问题描述】：

我的最高级别组件没有定义this.$store，导致错误。就在我的新 Vue 声明之前，我确认商店实际上已经创建。 Vue Devtools 报告我的商店并显示它具有所有预期的属性。基本上，商店并没有被注入到组件中。

我正在使用 Laravel Mix 并仅为运行时构建。我已大幅减少配置但无济于事。

我完全不知道如何解决这个问题。以下 SO 帖子无济于事：

This one 在 lambda 函数中使用了 this。
This、this、this、this 和 this 归结为一个被忽视的细节。

app.js

import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import Vuelidate from 'vuelidate';
import Router from 'vue-router';
import Vuex from 'vuex';
import App from './layout/index';

Vue.use(BootstrapVue);
Vue.use(Vuelidate);
Vue.use(Router);
Vue.use(Vuex);
Vue.config.productionTip = false;

const store = new Vuex.Store({
});

new Vue({
  store,
  render: h => h(App),
}).$mount('#vm')

webpack.mix.js

const mix = require('laravel-mix');
require('laravel-mix-eslint');

mix
  .js('resources/js/app.js','public/js')
  .options({
    processCssUrls: false,
  })
  .sass(
    'resources/sass/app.scss',
    'public/css',
    {
      implementation: require('node-sass'),
    }
  )
  .styles(
      [
        'node_modules/bootstrap/dist/css/bootstrap.min.css',
        'node_modules/bootstrap-vue/dist/bootstrap-vue.min.css'
      ],
      'public/vendor.css'
  )

if (mix.inProduction()) {
  mix.version();
} else {
  mix
    .sourceMaps()
    .webpackConfig({
      devtool: 'cheap-eval-source-map', // Fastest for development
    });
}

【问题讨论】：

你是如何初始化存储和你的根组件的？你能提供一些你的代码，甚至是一个sn-p吗？
告诉我们你在哪里拨打new Vue。
这个问题开始询问有关商店的问题，然后似乎完全改变了有关 Webpack 的问题的方向。如果看起来这是两个完全不相关的问题，那么它们应该单独发布。如果它们实际上是相关的问题，那么更清楚地说明它们是如何相关的会很有帮助。
关于 Webpack 的业务是说明性信息，而不是一个单独的问题。实际上，我什至不确定如何将其解释为“完全不相关”的问题。这很重要，因为我是 Webpack 的新手，并且无法弄清楚如何为这种情况正确配置它。当我指出正在构建状态并且我可以在 Vue Devtools 中查看它时，我不确定为什么需要 new Vue。对于咯咯笑，这里是：new Vue({router,store,render: h => h(App)}).$mount('#vm')

标签： vue.js webpack laravel-mix

【解决方案1】：

并不是我所有的Vue 引用都指向new Vue 语句中使用的那个。重构代码以确保所有 Vue 引用使用相同的对象解决了问题。

【讨论】：