1

Tenho uma duvida quanto atualizar o state usando o mutation, geralmente vejo a utilização da seguinte maneira:

[ALGUM_MUTATION_TYPE] (state, novoArray) {
   state.array = novoArray
}

Nesse modelo, sobrescrevemos os dados do state.array gerando um novo conteúdo.

Minha duvida são:

  • Se precisar adicionar somente um item neste array, é preciso fazer como no modo acima sobrescrevendo tudo?
  • Não podemos simplesmente dar um push?
  • Não teria uma melhor performance?

Dessa maneira:

[ALGUM_MUTATION_TYPE] (state, item) {
   state.array.push(item)
}

1 Resposta 1

1

Se precisar adicionar somente um item neste array, é preciso fazer como no modo acima sobrescrevendo tudo?

Depende como está sendo enviado a nova atualização do seu estado, se estiver enviando todos os itens do array precisa salvar todos e se estiver enviando somente a posição nova então um push:

state.array.push(item);

ou como é visto e feito por muitos assim:

state.array = [...state.array, item]; // ou state.array = newItems;

faz a adição ou alteração de todos os items.

As duas formas estão corretas não tem nesse aspecto comparação de desempenho e na minha opinião a segunda é realmente a cópia do novo valor com todos os itens. No caso exemplo no Vue isso funciona (push ou cópia completa) em outras como por exemplo React somente dar um push não resolve precisa copiar o novo array e enviar, então, a segunda forma é mais compatível e usual pela maioria, não acho que é moda mas, sim a forma correta de mudar o estado.

Um exemplo funcional:

const store = new Vuex.Store({
  state: {    
    items: []
  },
  mutations: {   
    addItem(state, value) {
      state.items = [...state.items, value]; // correto
      //state.items.push(value); // também correto
    }
  },
  actions: {
    addItem(context, value) {
      context.commit("addItem", value);
    }
  }
});
var vm = new Vue({
  el: '#app',
  store,
  data: {
    value: ''
  },
  computed: {   
    items() {
      return this.$store.state.items;
    }
  },
  methods: {
    handleAddItem: function() {
      if (this.value) {
        this.$store.dispatch("addItem", this.value);
      } else {
        alert("Digite o item!");
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.2/vuex.min.js"></script>
<div id="app">
  <div>
      <p>
        <input type="text" v-model="value" />
        <button v-on:click="handleAddItem">Add Item</button>
      </p>
      <ul>
        <li v-for="(item,index) in items" v-bind:key="index">{{item}}</li>
      </ul>
    </div>
</div>

Referencias

2
  • 1
    Excelente resposta Man! Muito obrigado! Então acredito que seja possível utilizar o push/unshift normalmente no state e ainda manter a reatividade. Commented 27/12/2019 às 17:14
  • No caso do Vue eu acredito que dá, mas, como não existe um padrão no React por exemplo não dá! @RubensBarbosa.
    – novic
    Commented 27/12/2019 às 19:31

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 .