[解決済み] Vuex - 計算されたプロパティ "name "が割り当てられたが、セッターを持たない

質問

フォームバリデーションを行うコンポーネントがあります。これは、複数段階のチェックアウトフォームです。以下のコードは、最初のステップのためのものです。ユーザーがテキストを入力したことを検証し、その名前をグローバルステートに保存して、次のステップに送りたいのです。使用しているのは ヴィーヴァリデート と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.

nameフィールドの値をグローバルステートにバインドするにはどうすればよいですか？ユーザーが（"Next Step"をクリックして）1ステップ戻っても、このステップで入力した名前が表示されるように、これを持続させたいと思います。

どのように解決するのですか？

もし、あなたが v-model を計算した場合、その計算には セッター . 更新された値に対して何をさせたいか（おそらくは $store ゲッターから取得することを考えると、セッターで行うことになります。

フォーム送信でストアに書き戻す場合、フォーム送信の際に v-model を設定するだけです。 :value .

もし、どこかに保存されるけど、ソースを上書きしない中間状態を $store フォームを送信するまで、そのようなデータ項目を作成する必要があります。