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

Posted 2023-02-22

【中文标题】如何在 Vuetify 组件中使用 Vue v-model 绑定以及计算属性和 Vuex？

【英文标题】：How to use Vue v-model binding in Vuetify components together with computed properties and Vuex?

【发布时间】：2020-04-17 18:03:50

【问题描述】：

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

我面临的问题的示例代码笔是here

每当单击单选按钮时，都会调用 Vuex 突变以将所选值保存在状态中。 但是，可能会出现某些验证在突变内部失败的情况，因此状态中的值不会按预期更改。

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

例如在 codepen sn-p 中，我希望第二个选项 (Option 1) 永远不会显示为已选择，因为相应的状态始终为 0。

据我所知，这种行为不仅发生在使用 v-radio-groups 时。 所有使用 v-model 和计算的 getter/setter 的 Vuetify 组件都会发生这种情况。 所以例如Vuetify 的 v-text-input/v-text-field 和 v-select 也显示相同的行为。

总结一下，我的问题如下： 为什么即使对应的状态不同，我的 codepen 示例中的第二个选项也会被选中？ 我怎样才能达到预期的结果（Option 1 从未显示为选中状态，即使单击它也是如此）？

【问题讨论】：

您不应该在突变内部执行任何验证。这是一个用于写入商店的纯函数。如果您需要执行验证，操作就可以了。

【参考方案1】：

据我所知，Vuetify 在其组件中保留自己的状态，例如 v-radio-group。

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

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

我将向您展示如何“阻止”更改状态并更新 v-radio-group，使其自身的状态与您的 $store.state.radiostate 中的实际状态相对应。

我会花更多时间来弄清楚如何在突变中执行它;-)

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

您的突变只是更新了状态。

// store.js
mutations: 
  setRadioState (state, data) 
    state.radioState = data;
  ,
,

您的 set 方法进行验证。

// component 
computed: 
  chosenOption: 
    get ()  
      return this.$store.state.radioState;
    ,
    set (value) 
      if (value !== 1) 
       this.$store.commit('setRadioState', value) 
       else 
        const oldValue = this.$store.state.radioState
        this.$store.commit('setRadioState', value)
        this.$nextTick(() => 
         this.$store.commit('setRadioState', oldValue)
        )
      
    
  

set 验证失败时会发生什么情况？您将当前状态保存到oldValue，然后更新状态，使其对应于v-radio-group 组件。在$nextTick 中，您将其更改回oldValue。这样v-radio-group 就会获得更新的道具并将其状态更改为您的。