Checkbox 如何将复选框绑定到Vuex存储？

我有一个包含一些复选框的组件。我需要能够访问从Vue应用程序中的其他组件选中的复选框，但我一辈子都不知道（也无法在线找到）如何将复选框正确连接到Vuex应用商店

将组件内的复选框连接到Vuex存储区的正确方法是什么，这样它们的作用就像复选框通过v-model连接到组件数据一样

这是我尝试做的一个起点（从非常基本的意义上讲）

其目的是通过Vuex存储获取在颜色复选框组件中选择的颜色，以在所选颜色组件中输出。

您可以与getter as和in computed属性一起使用，该属性将调用该状态属性来执行此操作

您可以看到具有双向计算属性的示例：

<input v-model="message">
// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

// ...
计算：{
信息：{
得到（）{
返回此。$store.state.obj.message
},
设置（值）{
此.$store.commit（'updateMessage'，值）
}
}
}

您应该删除数据中的颜色=[]。

我想提供一个实际使用复选框的答案

这里列出了一种可能的解决方案：

可以实现以下更简单的解决方案：

<div v-for="tenant in tenants" 
     v-bind:key="tenant.id" 
     class="form-group form-check">

<input type="checkbox" 
     class="form-check-input" 
     v-bind:id="tenant.id" 
     v-bind:value="tenant.name" 
     @change="updateSelectedTenants">

这里我想要值，在本例中是租户名称，但进一步检查目标也会给出“id”，以及复选框是否为“checked”或“unchecked”

在商店中，我们可以操作“selectedTenants”数组：

updateSelectedTenants (context, tenant) {
  if(tenant.checked) {
    // Tenant checked, so we want to add this tenant to our list of 'selectedTenants'
    context.commit('addSelectedTenant', { id: tenant.id, name: tenant.value })
  } else {
    // otherwise, remove the tenant from our list
    context.commit('removeSelectedTenant', tenant.id)
  }
}

以下是实际的变异因子：

addSelectedTenant (state, tenant) {
  this.state.selectedTenants.push(tenant)
},
removeSelectedTenant (state, id) {
  this.state.selectedTenants = this.state.selectedTenants.filter(tenant => {
    return tenant.id != id
  })

---

vuejs文档非常好，但有时它们对现实世界的示例有点启发。我不认为使用计算出的值来实现上述目标是可能的，比如get（），set（）。。。但我希望看到一个可以解决问题的解决方案

根据需要使用

@change

更新Vuex：

HTML:

---

好的，我被要求展示我的解决方案。给你

html是：

<div id="app">
  <label v-for="brother in ['Harpo','Groucho','Beppo']">
    <input type='checkbox' v-model='theBrothers' v-bind:value='brother' />
      {{ brother }}
  </label>
  <div>
  You have checked: {{ theBrothers }}
  </div>
</div> 

---

基于@Saurabh的解决方案-使用操作和getters而不是直接访问vuex状态非常重要-这将确保整个应用程序的一致性

<p>Mega test: <input type="checkbox" v-model="mega" /></p>

---

一些代码会有帮助吗？像问题一样，使用复选框输入字段的示例在这里会很好。所有在线示例都与您在此处提供的文本字段有关。@KatinkaHesselink有点晚了，但我用复选框Example提供了答案这是因为太多的代码无法执行vuejs内置的某些操作。而是在复选框中使用v-model='tenants'（负责添加/删除选定租户的数组），并将租户（数组）映射到vuex。去掉cb上的@change，去掉对vuex的分派，去掉变种。另外，租户数组不应该同时需要id和名称，只有id和名称是多余的。@Lesnattingill听起来不错。你能提供一个有效的例子吗？问题表明他们希望将复选框绑定到Vuex存储。。同意如果存储在本地州，这不是问题。此外，我现在可以看到“@change”可以移动到计算属性。。。但我不确定这能省多少钱。哈哈，认真地说@Leslongtingill如果你有这么好的解决方案，请展示你的工作；）太棒了，谢谢！谢谢你，莱斯。我认为，

this.$store.state.theBrothers=val

应该是Vuex变异，否则我认为这是可行的？

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

您不应该直接分配给该状态。使用突变。我认为这不起作用。我尝试过这个答案，但我没有直接修改状态，而是像其他人所建议的那样，使用了一个提交突变的操作。可能是我做错了什么，但我相信Vue是在直接修改状态，而不是在setter中调度操作。我在操作中添加了一个

console.log

语句，它从不记录日志。我还向vuex添加了一个记录器，每当我通过这些复选框更改状态时，它都不会写入控制台，但适用于我不使用复选框更新状态的其他组件。只有我的2美分。这不适用于复选框。我为vuex打开了

strict

模式，并收到错误，指出不直接改变状态（即使使用调用操作/改变的setter）

<input
  v-for='item in items'
  @change='update_checkboxes'
  v-model='selected_checkboxes'
  :value='item.id'
  type='checkbox
/>
<label>{{item.name}}</label>

data: function(){ 
  return {
    selected_checkboxes: [] // or set initial state from Vuex with a prop passed in
  }
},
methods: {
  update_checkboxes: function(){
    this.$store.commit('update_checkboxes', this.selected_checkboxes)
  }
}

<div id="app">
  <label v-for="brother in ['Harpo','Groucho','Beppo']">
    <input type='checkbox' v-model='theBrothers' v-bind:value='brother' />
      {{ brother }}
  </label>
  <div>
  You have checked: {{ theBrothers }}
  </div>
</div> 

const store = new Vuex.Store({
  state: {
    theBrothers: []
  },
})

new Vue({
  el: "#app",
  store: store,
  computed: {
    theBrothers: {
      set(val){this.$store.state.theBrothers = val},
      get(){ return this.$store.state.theBrothers }
    }
 },
}) 

<p>Mega test: <input type="checkbox" v-model="mega" /></p>

computed: {
  mega: {
    get () {
      return this.$store.getters.mega
    },
    set (value) {
      this.$store.dispatch('updateMega', value)
    }
  }
}

const store = new Vuex.Store({
  state: {
    mega: false
  },
  getters: {
    mega (state) {
      return state.mega
    }
  },
  mutations: {
    updateMega (state, value) {
      state.mega = value
    }
  },
  actions: {
    updateMega (context, value) {
      context.commit('updateMega', value)
    }
  }
})