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

Question

我正在创建 counter using Vue & Vuex 2。
尝试使用 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 导入

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

Can't access $store when importing Vuex instance from an external file

vue.js

vuex