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