如何使用 v-model 修改深度 vuex 数据 [英] How to modify deep vuex data with v-model

问题描述

我正在尝试修改 vuex 存储，但是在对象内部深处的键上使用 v-model.显然，在修改数据时，必须使用突变来完成.但我正在努力弄清楚如何以深刻的价值做到这一点.

这是一个小提琴，它应该会产生一个 vuex 错误(由于某种原因，这个错误不是在小提琴中产生的):

[vuex] 不要在变异处理程序之外改变 vuex 存储状态

https://jsfiddle.net/antony_publica/L27pcksn/70/

如何为从状态返回的对象内的对象设置计算值，而不必将整个数据集复制到另一个变量并手动跟踪所有更改?

解决方案

您将无法为此使用计算属性.不要使用 v-model，而是绑定到 :value 并注册你自己的事件监听器.

https://jsfiddle.net/jamesbrndwgn/L27pcksn/88/

您可能还想阅读规范化状态形状.它将使使用对象变得更加简单并避免深度嵌套.

I'm trying to modify a vuex store, but using v-model on a key deep inside the object. Obviously when modifying data it must be done using mutations. But i'm struggling to figure out how to do this with a deep value.

Here's a fiddle, which should generate a vuex error (the error isn't generated in the fiddle for some reason):

[vuex] Do not mutate vuex store state outside mutation handlers

https://jsfiddle.net/antony_publica/L27pcksn/70/

How can I setup a computed value for an object thats inside an object returned from a state without having to copy that entire dataset to another variable and track all the changes manually?

解决方案

You won't be able to use a computed property for this. Don't use v-model, instead bind to :value and register your own event listener.

https://jsfiddle.net/jamesbrndwgn/L27pcksn/88/

You may also want to read about normalizing state shape. It will make working with Objects much simpler and avoid deep nesting.

这篇关于如何使用 v-model 修改深度 vuex 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！