如何将复选框绑定到 Vuex 商店？

Question

我有一个包含一些复选框的组件。我需要能够访问从我的 Vue 应用程序中的其他组件检查了哪些复选框，但我一生都无法弄清楚（也无法在线找到）如何正确地将复选框连接到我的 Vuex 商店。

将组件中的复选框连接到 Vuex 存储的正确方法是什么，以便它们的行为就像复选框通过 v-model 连接到组件数据一样？

这是我正在尝试做的事情的起点（在非常基本的意义上）

https://jsfiddle.net/9fpuctnL/

<div id="colour-selection">
  <colour-checkboxes></colour-checkboxes>
</div>

<template id="colour-checkboxes-template">
  <div class="colours">
    <label>
      <input type="checkbox" value="green" v-model="colours"> Green
    </label>
    <label>
      <input type="checkbox" value="red" v-model="colours"> Red
    </label>
    <label>
      <input type="checkbox" value="blue" v-model="colours"> Blue
    </label>
    <label>
      <input type="checkbox" value="purple" v-model="colours"> Purple
    </label>
    
    <chosen-colours></chosen-colours>    
  </div>
</template>

<template id="chosen-colours-template">
  <div class="selected-colours">
      {{ colours }}
    </div>
</template>

const store = new Vuex.Store({
  state: {
    colours: []
  }
});

Vue.component('colour-checkboxes', {
  template: "#colour-checkboxes-template",
  data: function() {
    return {
      colours: []
    }
  }
});

Vue.component('chosen-colours', {
    template: "#chosen-colours-template",
  computed: {
    colours() {
        return store.state.colours
    }
  }
});

const KeepTalkingSolver = new Vue({
  el: "#colour-selection"
});

目的是让颜色复选框组件中选择的颜色通过Vuex商店输出到选择颜色组件中。

Answer 1

您可以在计算属性中使用computed property 和getter 作为vuex getter 和setter，这将为该状态属性调用mutation 来执行此操作。

您可以看到这个here 的示例，它具有双向计算属性：

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

Answer 2

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

这里列出了一种可能的解决方案： Vuex dynamic checkboxes binding

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

<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">

这里的关键是使用 on-change 调用方法，它会将一个事件传递给该方法，其中包含进行更改所需的所有详细信息。

@change 函数：

updateSelectedTenants(e) {
  console.log('e', e.target)
  console.log('e', e.target.value)
  this.$store.dispatch('updateSelectedTenants', e.target)
}

这里我想要值，在这种情况下是租户名称，但进一步检查目标也会给出“id”，以及复选框是“选中”还是未选中。

在 store 中，我们可以操作 '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() 来实现上述目标……但我希望看到一个解决方案。

Answer 3

好的，我被要求展示我的解决方案。这里是on jsfiddle

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> 

而js是：

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 }
    }
 },
}) 

Answer 4

2021 - 简单、易读并利用 Vue/Vuex 的强大功能...

一个简单的问题有很多复杂的答案。运行下面的 sn-p 以查看它的实际效果。

长话短说，您需要做的就是获取一个状态（下面的names），创建一个突变（下面的setNames）来设置它，然后将v-model绑定到computed（ selectedNames 下面）有一个 getter 和 setter，getter 获得状态片段names，setter 调用突变setNames。

在我看来，这是解决这个问题最干净的方法，因为它遵循 Vue/Vuex 的自然模式以及复选框的典型实现方式。

这里的其他答案试图直接改变状态而不发生突变，而其他一些答案避免使用v-model，这会出现具有预选值的问题并且需要更多代码，最后接受的答案甚至没有显示任何关于如何实现它的 HTML 模板代码。

这是一个解决所有这些问题的有效解决方案：

const store = new Vuex.Store({
  state: {
    names: ['Max'],
  },
  mutations: {
    setNames(state, names) {
      state.names = names;
    }
  }
});

new Vue({
  el: '#app',
  store,
  computed: {
    selectedNames: {
      get: function() {
        return this.$store.state.names;
      },
      set: function(val) {
      console.log(val);
        this.$store.commit('setNames', val);
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>

<div id="app">
  <div>
    <input type="checkbox" v-model="selectedNames" :value="'John'" id="checkbox-1" />
    <label for="checkbox-1">Click me to add my value to the state</label>

    <br />

    <input type="checkbox" v-model="selectedNames" :value="'Max'" id="checkbox-2" />
    <label for="checkbox-2">I am preselected since my value already exists in the state <code>names</code> array</label>

    <div>State: <strong>{{ names }}</strong></div>
  </div>
</div>

Answer 5

根据需要使用@change 更新 Vuex：

HTML：

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

JS：

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)
  }
}

Answer 6

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

<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)
    }
  }
})

Answer 7

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