我尝试创建第一个简单的应用程序,但我遇到了商店问题。
我在 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++
}
}
});
所以我会创建一个使用事件 increment 的 App 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>
但是我的Counter 组件中有这个错误:
[Vue warn]: Error in render: "TypeError: Cannot read property 'store' of undefined"
found in
---> at src\components\Counter.vue at src\App.vue
最佳答案
你只犯了一个小错误:它必须是$store
,而不是$.store
:
<template>
<div>{{ count }}</div>
</template>
<script>
export default {
name: "Counter",
computed: {
count () {
return this.$store.state.count
}
}
}
</script>
关于javascript - 存储 vuex 无法读取未定义的属性 'store'”,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46976203/