0

My highest-level component doesn't have this.$store defined, resulting in errors. Immediately before my new Vue statement, I confirmed that the store was in fact created. Vue Devtools reports my store and shows it to have all the expected properties. Basically, the store isn't being injected into the component.

I'm using Laravel Mix and building for runtime only.I have reduced my configuration substantially to no avail.

I'm completely stumped on how to resolve this. The following SO posts are no help:

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
    });
}
Jay Bienvenu
  • 3,069
  • 5
  • 33
  • 44
  • 1
    How are you initializing the store and your root component? Can you provide some of your code or even a snippet? – Decade Moon Nov 06 '19 at 21:39
  • Show us where you do the `new Vue` call. – ceejayoz Nov 06 '19 at 21:52
  • The question starts asking about the store and then seems to change direction entirely with a question about Webpack. If, as it appears, these are two wholly unrelated questions then they should be posted separately. If they are actually related questions then some extra clarity on how they are related would be helpful. – skirtle Nov 07 '19 at 06:08
  • The business about Webpack is expository information, not a separate question. In fact, I'm not even sure how it can be construed as a "wholly unrelated" question. It's relevant because I'm new to Webpack and having trouble figuring out how to properly configure it for this case. I'm not sure why the `new Vue` is necessary when I indicated that the state is being built and I can look at it in Vue Devtools. For griggles, here it is: `new Vue({router,store,render: h => h(App)}).$mount('#vm')` – Jay Bienvenu Nov 07 '19 at 14:43

1 Answers1

0

Not all of my Vue references pointed to the one used in the new Vue statement. Refactoring the code to ensure all Vue references used the same object resolved the problem.

Jay Bienvenu
  • 3,069
  • 5
  • 33
  • 44