此$ .store在组件中未定义

Question

我的最高级别组件未定义this.$store，导致错误。在我发布新的Vue语句之前，我立即确认该商店实际上是创建的。 Vue Devtools报告了我的商店，并显示它具有所有预期的属性。基本上，商店不是被注入到组件中。

我正在使用LaravelMix并仅用于运行时构建。我已将我的配置大大减少了，无济于事。

我对如何解决这个问题深感困惑。以下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
    });
}

Answer 1

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