怎样解决 [Vue warn]: The computed property "count" is already defined in data. 报错问题?
最近在写vue项目时候发现一个项目中报如下错误vue.esm.js?5425:578 [Vue warn]: Property or method "counit" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in th
最近在写vue项目时候发现一个项目中报如下错误
vue.esm.js?5425:578 [Vue warn]: Property or method "counit" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <App> at src\Vuex.vue
<Root>
代码如下:
store.js:
import Vue from 'vue'
import Vuex from 'vuex'//记得用cnpm install vuex --save
Vue.use(Vuex)
const state={//状态对象
count:4
}
const mutations={//触发状态
jia(state){
state.count++;
},
jian(state){
state.count--;
}
}
export default new Vuex.Store({
state,
mutations
})
main.js注册:
import Vue from 'vue'
import App from './App'
import router from './router'
import store from'./store'
import vuex from'./Vuex'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App },
store,
render:xx=>xx(vuex)
})
vuex.vue代码如下:
<template>
<div id="app">
<h1>Hello,World</h1>
<p>{{$store.state.count}}-{{count}} </p>
<button @click="$store.commit('jia')">+</button>
<button @click="$store.commit('jian')">-</button>
</div>
</template>
<script>
export default{
name:'app',
data(){
return {
count:0
}
},
computed:{
count(){
return this.$store.state.count
}
}
}
</script>
<style>
</style>
我当时搞了半天还是没解决,后来我用有道翻译了此句话The computed property "count" is already defined in data的意思:计算的属性“count”已经在数据中定义。那么照此推理,main.js和store.js没有问题,后来我把计算属性中computed中count改为counit并且把-{{count}}改为-{{counit}}问题解决。这说明计算属性的名字不能与data中属性同名。
更多推荐
所有评论(0)