從外部文件導入Vuex實例時無法訪問$ store

Question

我正在創建counter using Vue & Vuex 2。
當試圖訪問商店對象的count屬性時，使用this.$store.state.count，我得到一個Cannot read property 'state' of undefined錯誤。

錯誤不會顯示出來，當我在main.js內創建存儲實例而不是導入它時，一切正常。

main.js

import Vue from 'vue' 
import Vuex from 'Vuex' 
import App from './App.vue' 
import store from './store' 

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

store.js

import Vue from 'Vue' 
import Vuex from 'Vuex' 

Vue.use(Vuex) 

export default new Vuex.Store({ 
    state: { 
    count: 1 
    } 
}); 

Counter.vue

export default { 
    name: 'counter', 
    template: `<span>{{ count }}</span>`, 
    computed: { 
    count() { 
     return this.$store.state.count 
    } 
    }, 
} 

任何想法有什麼不對的智慧h商店導入？

Answer 1

已導入VUE不同：

import Vue from 'Vue' 

內store.js和

import Vue from 'vue' 

內main.js

改變你的store.js導入到匹配main.js來解決這個問題，即

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

Vue.use(Vuex) 

export default new Vuex.Store({ 
    state: { 
    count: 1 
    } 
}); 

您還可以刪除main.js中的Vuex導入