最近在写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中属性同名。