ラジオボタンを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

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>

は、右のトラックに私を置く：

は、ここで簡単な例を示します。ストアにコミットするupdateInfoSource方法で

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

：私が思いついた解決策はこれです。

Answer 2

に文句は、あなたが変異の外Vuex状態オブジェクトの値を変更することはできません方法。

get/setメソッドを持つ計算プロパティを作成して、Vuexストア内の関連データの状態を参照/更新することができます。このblogpost