这个$vuex3未定义存储

Question

我使用vuejs 2和vuex 3创建了一个vue应用程序。

这是代码：应用程序：

<template>
<div id="app">
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-view></router-view>
<button v-on:click="increment">Test</button>
</div>
</template>
<script>
export default {
components: {
},
data() {
return {
}
},
methods: {
increment() {
this.$store.commit('increment')
console.log(this.$store.state.count)
}
},
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

store.js:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})

main.js

import Vue from 'vue'
import router from './router.js'
import VueRouter from 'vue-router';
import App from './App.vue'
import Vuex from 'vuex'
import store from './store.js'
Vue.use(Vuex)
Vue.use(VueRouter)
Vue.config.productionTip = false
new Vue({
router: router,
store: store,
template: '<App/>',
components: { App },
render: h => h(App),
}).$mount('#app')

当我点击App.vue文件中的按钮时。它总是抛出这样的错误$存储未定义。我做错什么了吗？但是当我在main.js文件中添加以下代码时。一切顺利。

Vue.prototype.$store = store;

但是我已经在Vue构造函数中注册了商店吗。为什么我需要那个代码？有人能告诉我修理它的最佳方法吗？非常感谢。

Answer 1

发现我安装了错误版本的vuex(v4而不是v3(。问题解决了。