如何将复选框绑定到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屋！