1

Tenho o seguinte código abaixo utilizando Vue.js e Vuex. Este código incrementa e decrementa valor como um contador. Gostaria de saber ao que se refere o método count dentro de computed na instância Vue. Sei que ele retorna o estado da váriavel count do state. Mas pq o nome do método tem que ser o nome da variável? Se eu troco o nome do método o código não funciona.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    incrementa: state => state.count++,
    decrementa: state => state.count--
  }
})

new Vue({
  el: '#app',
  computed: {
    count() {                   // Dúvida -> ao que se refere count
      return store.state.count
    }
  },
  methods: {
    incrementa() {
      store.commit('incrementa')
    },
    decrementa() {
      store.commit('decrementa')
    }
  }
})
span{padding: 0 15px;}
<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app">
  <p>
    <button @click="incrementa">+</button>
    <span>{{ count }}</span>
    <button @click="decrementa">-</button>
  </p>
</div>

3 Respostas 3

1

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/[email protected]/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/[email protected]"></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>

2
  • Certo man, entendido agora. Não sabia que o {{ count }} que referenciava o método count(). Por isso dava erro, pois só trocava o nome na computed e não na interpolação. Agora ficou claro. Obrigado!
    – LeAndrade
    Commented 12/09/2018 às 18:44
  • Isso... as variáveis que tu tenta dar print no template ({{ variavel }}) são sempre buscadas no objeto Vue, pois o template faz parte do componente também. Commented 12/09/2018 às 18:45
1

No caso, o nome do método dentro da computed não precisa ser o mesmo nome da variável, porém o nome do atributo que está dentro do state deve ser o mesmo nome do atributo dentro da sua store. Veja isto no exemplo abaixo:

const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        incrementa: state => state.count++,
        decrementa: state => state.count--
      }
    })

    new Vue({
      el: '#app',
      computed: {        
        count() {                   // Dúvida -> ao que se refere count
          return store.state.count
        },
        teste() {
          return store.state.count
        }        
      },
      methods: {
        incrementa() {
          store.commit('incrementa')
        },
        decrementa() {
          store.commit('decrementa')
        }
      }
    })
span{padding: 0 15px;}
<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app">
  <p>
    <button @click="incrementa">+</button>
    <span>{{ count }}</span>
    <span>{{ teste }}</span>    
    <button @click="decrementa">-</button>
  </p>
</div>

Porém, usualmente é mais utilizado em aplicações reais o mapState, onde fica menos repetitivo o uso do store e mais claro o que você está realmente mapeamento para suas stores, principalmente quando há mais de uma.

Outro ponto que deve ser observado, é que em uma aplicação real você realiza uma injeção da store dentro da própria instância do Vue usualmente falando, assim usa-se com this.$store e não store diretamente.

3
  • Tudo bem, vc criou outro método (Teste) dentro de computed que retorna a store com a state da variável count e este método faz o mesmo que o método count, certo. Só que a dúvida persiste, se você mudar o nome do método count() da erro, isto que gostaria de saber o pq? Você disse na sua resposta "No caso, o nome do método dentro da computed não precisa ser o mesmo nome da variável", tenta mudar o nome de count() para ver se não dá erro.
    – LeAndrade
    Commented 12/09/2018 às 18:02
  • Cara se você mudar o count() da computed, tem que mudarn o HTML para o nome que você mudou, será que você não mudou? A computed é como se fosse uma variável do data(), assim tem que mudar no HTML também, o nome do HTML e na computed devem ser exatamente os mesmos. Commented 12/09/2018 às 20:56
  • Exato man, era isto mesmo que não estava entendendo. Eu trocava no computed mas não no Html. Obrigado plea ajuda!
    – LeAndrade
    Commented 12/09/2018 às 20:58
1

Pode pensar nesses métodos dentro de computed como variáveis que se auto-atualizam, ou seja no template vais ter acesso a uma "variável" com o nome desse método.

No template tens <span>{{ count }}</span> e esse count é o retorno desse count(){ dentro do computed.

Portanto, vê cada propriedade/método desse computed como variáveis que estão sempre atualizadas. Essa atualização deve-se a um mecanismo interno do Vue (reactividade) e que regista quais as dependências que esse método tem. E quando uma dessas dependências for atualizada o método é corrido de novo e o valor de count atualizado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .