我有一个客户列表,它实际上是一个对象数组,我将它存储在Vuex中,然后在组件中呈现列表,每行都有一个复选框,更准确地说,我使用keen-ui,复选框呈现部分看起来像这样:
<tr v-for="customer in customers" :class="{ selected: customer.selected }">
<td>
<ui-checkbox :value.sync="customer.selected"></ui-checkbox>
</td>
<td>{{ customer.name }}</td>
<td>{{ customer.email }}</td>
</tr>
因此,该复选框直接更改了客户的坏阵列:我在Vuex中使用严格模式,它会给我一个错误。
我想跟踪数组的更改时间,并调用一个操作来更改vuex状态:
watch: {
'customers': {
handler() {
// ...
},
deep: true
}
但是它仍然直接改变了客户。我该如何解决这个问题?
4条答案
按热度按时间nnsrf1az1#
首先,使用
.sync
时要小心:它在2.0中将被弃用。看看这个:http://vuex.vuejs.org/en/forms.html,因为这个问题在这里解决了。基本上,这个复选框应该在
input
或change
上触发vuex
操作。摘自文档:其中
updateMessage
为:如果您不希望跟踪突变,可以将此组件的状态从
vuex
移开,以便能够充分使用v-model
。k0pti3hp2#
您只需要定制getter和setter:
在您的商店:
我不太清楚你的商店是什么样子的,但希望这能给你一个想法:)
8oomwypt3#
如果您的客户处于root状态,您可以尝试以下操作:
a7qyws3x4#
试着在你的组件中使用mapState,并像你上面所做的那样观察客户。