Vuex：存儲對象在組件中不可見

Question

當我嘗試訪問隨機組件內的vuex存儲時，返回undefined。但是，我將商店注入到了我的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'); 

店/ 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（{ 商店， 模式： '歷史'， 基： '/應用/'， 路線：路由}）;

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