Question

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

将组件中的复选框连接到Vuex商店的正确方法是什么，这样它们就像复选框通过v-model连接到组件数据一样？

以下是我尝试做的事情的起点（非常基本的意义）

Code in jsfiddle below

https://jsfiddle.net/9fpuctnL/

目的是让颜色复选框组件中选择的颜色在选定颜色组件中输出，通过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

好的，我一直被要求展示我的解决方案。这是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 3

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

这里概述了一种可能的解决方案： 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”，以及该复选框是“选中”还是未选中。

在商店中，我们可以操纵'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 4

根据需要使用public void TakeDamage(int damage) { vidaEnemigo -= damage; if(vidaEnemigo <= 0f){ Die(); }更新Vuex：

HTML：

@change

JS：

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

Answer 5

基于@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 6

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

一个简单的问题有很多复杂的答案。运行下面的代码片段以查看它的实际效果。

长话短说，你需要做的就是获取一个状态（下面的char *word = {'a', 'b', 'c', '\0'}），创建一个mutation（下面的names）来设置它，然后绑定setNames到具有 getter 和 setter 的 v-model（下面的computed），getter 获取状态段 selectedNames，setter 调用变更 names。

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

此处的其他答案尝试直接改变状态而不进行突变，而其他一些答案避免使用 setNames，这会带来具有预选值的问题并需要更多代码，最后接受的答案没有甚至展示任何关于如何实现它的 HTML 模板代码。

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

v-model

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

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

Answer 7

你应该删除数据中的colors = []。

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

7 个答案:

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