Vue.js 如何在Vuetify组件中使用Vue v-model绑定以及计算属性和Vuex？

我正在尝试将v-radio-group与Vuex的计算值结合使用，如类似描述

我面临的问题的例子是

无论何时单击单选按钮，都会调用Vuex变异以将选定值保存在状态中。
但是，可能会出现这样的情况，即变异内部的某些验证失败，因此该值在状态中没有按预期更改

无论Vuex状态中的值是什么，单选按钮都不会真正反映当前状态

例如，在codepen代码段中，我希望第二个选项（

选项1

）永远不会显示为选中状态，因为相应的状态始终为0

据我所知，这种行为不仅仅发生在使用v-radio-groups时。
使用

v-model

和计算getter/setter的所有Vuetify组件都会发生这种情况。
因此，例如Vuetifys v-text-input/v-text-field和v-select也显示相同的行为

总之，我的问题如下：
为什么我的代码笔示例中的第二个选项会被选中，即使对应的状态不同？

---

我如何才能达到预期的结果（使

选项1

从未显示为选中状态，即使在单击时也是如此）？

据我所知，Vuetify在其组件（如

v-radio-group

）中保持其自身的状态

要更改它，您需要发送更新的道具。然后它将做出反应并更新自己的状态

问题在于，您正在对一个突变执行验证。在我看来，这是一种不好的做法

我将向您展示如何“阻止”更改状态并更新

v-radio-group

，使其自身的状态与

$store.state.radioState

中的实际状态相对应

我会花更多的时间来弄清楚如何在突变中执行；-）

这不是一个完美的解决方案>

你的变异只是更新了状态

//store.js
突变：{
设置无线电状态（状态、数据）{
state.radioState=数据；
},
},

您的

set

方法执行验证

//组件
计算：{
chosenOption：{
获取（）{
返回此。$store.state.radioState；
},
设置（值）{
如果（值！==1）{
此.$store.commit（'setRadioState'，值）
}否则{
const oldValue=此。$store.state.radioState
此.$store.commit（'setRadioState'，值）
这个.$nextTick（（）=>{
此.$store.commit（'setRadioState'，oldValue）
})
}
}
}
}

验证失败时，

集合

中会发生什么？将当前状态保存到

oldValue

，更新状态使其对应于

v-radio-group

组件。在

$nextTick

中，您可以将其改回

oldValue

。这样，

v-radio-group

就可以更新道具并将其状态更改为您的状态

---

您不应该在突变内部执行任何验证。这是一个纯函数，用于向存储写入数据。如果需要执行验证，则可以执行操作。