如何将单选按钮绑定到vuex商店？

Question

我想单向绑定一组单选按钮的值到我的模型,并在更改时更新vuex存储.不幸的是,这似乎没有在任何地方记录.任何帮助将不胜感激.

双向绑定的工作原理如下:

<input type="radio" name="info-source" value="1" id="info-source-1" v-model="infoSource">
<label for="info-source-1">TV</label>
<input type="radio" name="info-source" value="2" id="info-source-2" v-model="infoSource">
<label for="info-source-2">Social media</label>

然而,在这种情况下,vuex开始抱怨 Do not mutate vuex store state outside mutation handlers

Answer 1

如警告所述,您无法在突变方法之外修改Vuex状态对象的值.

您可以创建一个计算属性,其中get/ setmethods用于引用/更新Vuex存储中相关数据的状态.

这是一个简单的例子:

const store = new Vuex.Store({
  state: {
    gender: 'female',
  },
  mutations: {
    SET_GENDER(state, gender) {
      state.gender = gender;
    }
  }
});

new Vue({
  el: '#app',
  store,
  computed: {
    gender: {
      get() {
        return this.$store.state.gender;
      },
      set(value) {
        this.$store.commit("SET_GENDER", value);
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.3.1/vuex.min.js"></script>
<div id="app">
  <input type="radio" name="gender" value="male" v-model="gender">Male<br>
  <input type="radio" name="gender" value="female" v-model="gender">Female<br>
  <input type="radio" name="gender" value="other" v-model="gender">Other<br>
  Vuex store value: {{ $store.state.gender }}<br>
  Computed property value: {{ gender }}
</div>

Answer 2

这篇博文让我走上了正轨。我想出的解决方案是这样的：

<input type="radio" name="info-source" value="1" 
       :checked="infoSource === 1" @change="updateInfoSource(1)">

使用updateInfoSource提交到商店的方法。

有关完整示例，请查看以下帖子：如何将单选按钮绑定到 vuex 商店？