Vue.js 如何将单选按钮绑定到vuex应用商店？

我想将一组单选按钮的值单向绑定到我的模型，并在更改时更新vuex存储。不幸的是，这似乎没有记录在任何地方。任何帮助都将不胜感激

双向绑定的工作原理如下所述：

<input type="radio" name="info-source" value="1" id="info-source-1" v-model="infoSource">
<label for="info-source-1">TV</label>
<input type="radio" name="info-source" value="2" id="info-source-2" v-model="infoSource">
<label for="info-source-2">Social media</label>

电视
社会化媒体

---

但是，vuex开始抱怨在这种情况下

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

作为警告状态，您不能在变异方法之外修改vuex状态对象的值

您可以创建一个计算属性，该属性具有

get

/

set

方法来引用/更新Vuex存储中相关数据的状态

下面是一个简单的例子：

const store=新的Vuex.store({
声明：{
性别：'女性'，
},
突变：{
设定性别（州、性别）{
state.gender=性别；
}
}
});
新Vue({
el:“#应用程序”，
商店，
计算：{
性别：{
得到（）{
返回此。$store.state.gender；
},
设置（值）{
这是.$store.commit（“设置性别”，值）；
}
}
}
})

男性

女性

其他

Vuex存储值：{{$store.state.gender}}

计算的属性值：{{gender}

这让我走上了正确的道路。我提出的解决方案是：

<input type="radio" name="info-source" value="1" 
       :checked="infoSource === 1" @change="updateInfoSource(1)">

使用

updateInfoSource

方法提交到存储

---

要获得完整的示例，请查看以下帖子：

作为旁注，当然不需要getter。您可以直接访问该州。但是getter经常让senseI尝试这种方法，但是vuex一直抱怨

不要改变vuex存储状态…

这意味着你仍然在代码中的某个地方，在改变方法之外更新vuex存储状态。如果infoSource值以编程方式改变，收音机会被检查吗？意思是它真的是被动的吗？是的，如果值发生变化，Vuex将负责更新