A propriedade computed
do objeto Vue é onde se declara suas Computed Properties.
Dá para se pensar em Computed Properties como propriedades onde se definem apenas os getters (e opcionalmente, setters) para algo.
Não há um valor registrado na propriedade, e sim uma função getter que pode ou não busca o valor desejado em outros lugares. Uma das vantagens de usar Computed Properties no Vue.JS é que o Vue faz cache do resultado do getter, e invalida a cache caso as dependências do getter sejam alteradas.
Exemplo básico usando computed property para calcular o nome completo:
var app = new Vue({
el: '#app',
data: {
nome: '',
sobrenome: ''
},
computed: {
nome_completo: function () {
// concatena e elimina espaços em excesso
return `${this.nome } ${this.sobrenome}`.replace(/\s+/g, ' ')
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
<input v-model="nome">
<input v-model="sobrenome">
<div>{{ nome_completo }}</div>
</div>
Agora, respondendo o porquê teu código dá erro ao alterar o nome da computed property:
O state
count
é uma coisa, o computed property
count
é outra.
O state
count
só é referenciado dentro da função contador()
na linha
return store.state.count
O computed property
count
está sendo referenciado no template, na linha
<span>{{ count }}</span>
Para acessar a computed property
é necessário acessá-lo através do objeto Vue. Exemplo:
this.count // Acessa a computed property
Para acessar o state
count
é necessário acessá-lo através do Vuex. No seu exemplo:
store.state.count
Abaixo modifiquei apenas o nome da computed property
no objeto Vue e no template para mostrar como funciona com nomes diferentes.
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
incrementa: state => state.count++,
decrementa: state => state.count--
}
})
new Vue({
el: '#app',
computed: {
contador() { // agora é contador
return store.state.count
}
},
methods: {
incrementa() {
store.commit('incrementa')
},
decrementa() {
store.commit('decrementa')
}
}
})
span{padding: 0 15px;}
<script src="https://unpkg.com/vuex@3.0.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<p>
<button @click="incrementa">+</button>
<span>{{ contador }}</span> <!-- printa a computed property -->
<button @click="decrementa">-</button>
</p>
</div>