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

Question

我正在使用 Vue & Vuex 2 创建一个计数器。
当尝试访问 store 对象的 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
  }
});

计数器.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 导入