我尝试创建第一个简单的应用程序,但我的存储有问题。
我在mainJS
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App'
import router from './router'
Vue.use(Vuex);
import {store} from './Store.js';
store.commit('increment')
new Vue({
el: '#app',
router,
store,
template: '<div><App></App></div>',
components: { App }
});
所以在我的 store.js
中import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
});
所以我会创建一个使用事件增量的App Component的子组件,所以我创建了一个Component Counter
<template>
<div>{{ count }}</div>
</template>
<script>
export default {
name: "Counter",
computed: {
count () {
return this.$.store.state.count
}
}
}
</script>
我从我的App组件中调用此组件:
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<Counter></Counter>
</div>
</template>
<script>
import Counter from './components/Counter.vue'
export default {
name: 'app',
components:{
Counter
}
}
</script>
但我的计数器组件中出现此错误:
[Vue警告]:渲染错误:“TypeError:无法读取属性'store' 未定义的“
在
中找到---&GT;在src \ components \ Counter.vue 在src \ App.vue
答案 0 :(得分:3)
你只犯了一个小错误:它必须是$store
,而不是$.store
:
<template>
<div>{{ count }}</div>
</template>
<script>
export default {
name: "Counter",
computed: {
count () {
return this.$store.state.count
}
}
}
</script>
答案 1 :(得分:0)
我遇到了同样的问题,在所有.js存储文件行中,从Vue
更改为vue
,从Vuex
更改为vuex
。