Vuex：存储对象在组件中不可见

Question

当我尝试访问随机组件内的 vuex 存储时，会返回 undefined。但是，我将 store 注入到我的 Vue 对象中。有谁知道如何解决这个问题？我可以手动将 store 对象导入到每个组件中，但这并不是很干净...... 我的文件如下所示：

ma​​in.js

import Vue from 'vue'

import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import VueI18n from 'vue-i18n'

import routes from './config/routes'
import locales from './lang/locales'
import store from './store'

//Routing support
Vue.use(VueRouter);
//Backend support
Vue.use(VueResource);
//Language support
Vue.use(VueI18n);


Vue.config.lang = 'nl';

Object.keys(locales).forEach(function (lang) {
    Vue.locale(lang, locales[lang])
});

const router = new VueRouter({
    store,
    mode: 'history',
    base: '/app/',
    routes: routes
});

new Vue({
    router
}).$mount('#app');

store/index.js

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

import fleet from './modules/fleet'

Vue.use(Vuex)

export default new Vuex.Store({
    modules : {
        fleet
    }
})

app.vue

<template>
    <div id="page-content-wrapper">
        <nav-bar></nav-bar>
        <div class="container-fluid">
            <div class="row">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
<script>

    import NavBar from './assets/navBar.vue'
    export default {
        created() {
            console.log(this.$store)
        },
        components: {
            NavBar
        }
    }
</script>

this.$store 返回未定义

Answer 1

const 路由器 = 新的 VueRouter({ 店铺， 模式：'历史'， 基础：'/app/'， 路线：路线}）；

新的 Vue({ 路由器 }).$mount('#app');

商店设计设置在new Vue：

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

您已将其放入 VueRouter 实例中。

正确的代码组合：

const router = new VueRouter({
  routes,
  mode: 'history',
  base: ...
});

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})