从外部文件导入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导入