从外部文件导入Vuex实例时无法访问$ store

Question

我正在使用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
    }
  },
}

知道商店进口有什么问题吗？

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导入