如何将复选框绑定到Vuex存储? [英] How to bind checkboxes to Vuex store?
问题描述
我有一个包含一些复选框的组件。我需要能够访问从Vue应用程序中的其他组件中选中了哪些复选框,但是我一生都无法弄清楚(也不在线查找)如何将复选框正确连接到我的Vuex商店。
I have a component that contains some checkboxes. I need to be able to access which checkboxes are checked from other components in my Vue application, but I cannot for the life of me figure out (nor find online) how to properly connect the checkboxes to my Vuex store.
将组件中的复选框连接到Vuex存储的正确方法是什么,以使它们的行为就像复选框通过v-model连接到组件数据一样?
What is the right way to connect checkboxes within a component to a Vuex store, so that they act just as if the checkbox was connected to the components data via v-model?
这是我要做的工作的起点(从非常基本的意义上来说)
Here is a starting point for what I'm trying to do (in a very very basic sense)
Code in jsfiddle below
中的代码
https://jsfiddle.net/9fpuctnL/
目的是获得选定的颜色
The aim is to get the colours that are selected in the colour-checkboxes component to output in the chosen-colours component, going through the Vuex store.
推荐答案
您可以使用<一个href = https://vuejs.org/v2/guide/computed.html rel = noreferrer>计算属性,getter为 vuex getter 和设置在计算属性中,该属性将调用变异对该状态属性执行此操作。
You can use computed property with getter as vuex getter and setter in computed property which will call a mutation for that state property to do this.
您可以看到此此处具有双向计算属性:
You can see an example of this here with two-way Computed Property:
<input v-model="message">
// ...
computed: {
message: {
get () {
return this.$store.state.obj.message
},
set (value) {
this.$store.commit('updateMessage', value)
}
}
}
这篇关于如何将复选框绑定到Vuex存储?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!