Store referenced but not defined

问题

Hey I have some bullshit issue with store not being defined. Any advice so I can move on and finish this software build? Store and contents of store appears in Vue Inspector tools. When put inline like below it breaks and renders blank - no DOM content inside App component.

App.vue offending excerpt

<div v-if="$store.state.showPreloader == true" id="preloaderWrap">
   <div id="preloader"></div>
</div>

Store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
    stuff
}
const mutations = {
  stuff
}
const getters = {
    stuff
}
const actions = {
    stuff
}

export default new Vuex.Store({
  state: state,
  mutations: mutations,
  getters: getters,
  actions: actions
})

Main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueGraph from '../node_modules/vue-graph'
import VueMaterial from '../node_modules/vue-material'
import 'vue-material/dist/vue-material.min.css'

Vue.config.productionTip = false;
Vue.use(VueGraph);
Vue.use(VueMaterial);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

回答1:

You need to init Vue with store:

new Vue({
  el: '#app',
  router,
  store: store,
  components: { App },
  template: '<App/>'
})

来源：https://stackoverflow.com/questions/53099871/store-referenced-but-not-defined