存储引用但未定义答案

【问题标题】：Store referenced but not defined存储引用但未定义
【发布时间】：2018-11-01 10:57:29
【问题描述】：

嘿，我有一些关于商店未定义的废话问题。有什么建议可以让我继续并完成这个软件构建吗？ Store 和 store 的内容出现在 Vue Inspector 工具中。当像下面这样放入内联时，它会中断并呈现空白 - App 组件内没有 DOM 内容。

App.vue 违规摘录

<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/>'
})

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

你需要用 store 初始化Vue：

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

【讨论】：

哇，完全忽略了这一点！当您在生产中切换模板时会发生这种情况。谢谢！