Vuex - 計算されたプロパティ "name"は割り当てられましたが、設定子はありません

Question

私はいくつかのフォームバリデーションを持つコンポーネントを持っています。それは複数ステップのチェックアウトフォームです。以下のコードは、最初の手順です。ユーザーがテキストを入力し、名前をグローバル状態に保存してから、次のステップに送信することを確認したいと思います。私は私がオーダー状態を処理し、名前を記録するために店を持っているvee-validateとvuex

<template> 
<div> 
    <div class='field'> 
     <label class='label' for='name'>Name</label> 
     <div class="control has-icons-right"> 

      <input name="name" v-model="name" v-validate="'required|alpha'" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="First and Last"> 
      <span class="icon is-small is-right" v-if="errors.has('name')"> 
       <i class="fa fa-warning"></i> 
      </span> 
     </div> 
     <p class="help is-danger" v-show="errors.has('name')">{{ errors.first('name') }}</p> 

    </div> 
    <div class="field pull-right"> 
     <button class="button is-medium is-primary" type="submit" @click.prevent="nextStep">Next Step</button> 
    </div> 
</div> 
</template> 

<script> 
export default { 
    methods: { 
     nextStep(){ 
      var self = this; 

      // from baianat/vee-validate 
      this.$validator.validateAll().then((result) => { 
       if (result) { 
        this.$store.dispatch('addContactInfoForOrder', self); 
        this.$store.dispatch('goToNextStep'); 
        return; 
       } 
      }); 
     } 
    }, 
    computed: { 
     name: function(){ 
      return this.$store.state.name; 
     } 
    } 
} 
</script> 

を使用しています。最終的に私はすべての情報をマルチステップ形式からサーバーに送信したいと思います。私はこのコードを実行すると

export default { 
    state: { 
    name: '', 
    }, 

    mutations: { 
    UPDATE_ORDER_CONTACT(state, payload){ 
     state.name = payload.name; 

    } 
    }, 

    actions: { 
    addContactInfoForOrder({commit}, payload) { 
     commit('UPDATE_ORDER_CONTACT', payload); 
    } 
    } 
} 

は私がComputed property "name" was assigned to but it has no setter.

がどのように私はグローバルな状態に名前フィールドの値をバインドしないとエラーが出ますか？私はこれを永続的にして、ユーザーがステップ（「次のステップ」をクリックした後）に戻っても、このステップで入力した名前が表示されます。

Answer 1

v-modelsetterが必要です。更新された値（おそらく$storeにそれを書いてください、それはあなたのゲッターがそれを引き出すものだと考えてください）をあなたがセッターでやるのと同じようにしたいのです。

v-modelに登録したくない場合は、:valueに設定してください。

フォームの提出までにどこかに保存されているにもかかわらず$storeのソースを上書きしない中間的な状態にしたい場合は、そのようなデータ項目を作成する必要があります。

Answer 2

ロイJの答えに加えて、設定者なしの計算でv-forを使用すると、この警告もスローされるようです。