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

Question

我正在创建一个counter using Vue & Vuex 2。
尝试使用 this.$store.state.count 访问 store 对象上的 count 属性时，我收到 Cannot read property 'state' of undefined 错误。

当我在main.js 中创建商店实例而不是导入它时，错误没有 出现并且一切正常。

ma​​in.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 导入