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

Question

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

main.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 returns 未定义

Answer 1

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

new Vue({ router }).$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)
})

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

Vuex: store object not visible in components

vuejs2

vuex