Question

我正在制作counter using Vue & Vuex 2 尝试使用this.$store.state.count访问商店对象上的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导入

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

1 个答案: