Vuex - Hesaplanan özellik "adı" atandı, ancak ayarlayıcı yok

Bazı form doğrulamalı bir bileşenim var. Çok adımlı bir ödeme formudur. Aşağıdaki kod ilk adım içindir. Kullanıcının bir metin girdiğini doğrulamak, adını genel durumda saklamak ve ardından bir sonraki adıma göndermek istiyorum. Ben kullanıyorum vee doğrulamanız ve 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>

Sipariş durumunu işlemek ve adı kaydetmek için bir mağazam var. Sonuçta tüm bilgileri çok adımlı formdan sunucuya göndermek istiyorum.

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

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

    }
  },

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

Bu kodu çalıştırdığımda bir hata alıyorum Computed property "name" was assigned to but it has no setter.

Ad alanındaki değeri global duruma nasıl bağlarım? Bunun kalıcı olmasını istiyorum, böylece bir kullanıcı bir adım geri dönse bile ("Sonraki Adım" ı tıkladıktan sonra) bu adımda girdiği adı görsün

v-modelBir hesaplamaya gidiyorsanız , bir ayarlayıcıya ihtiyacı vardır . Güncellenen değerle ne yapmasını istiyorsanız (muhtemelen $storealıcınızın onu çekeceğini düşünerek yazınız ) ayarlayıcıda yaparsınız.

Mağazaya geri yazmak form gönderimi yoluyla gerçekleşiyorsa, istemezsiniz v-model, sadece ayarlamak istersiniz :value.

Bir yere kaydedildiği ancak $storeform gönderilinceye kadar kaynağın üzerine yazmadığı bir ara duruma sahip olmak istiyorsanız , böyle bir veri öğesi oluşturmanız gerekir.

Böyle olmalı.

Senin içinde Bileşeni

computed: {
        ...mapGetters({
                nameFromStore: 'name'
            }),
        name: {
           get(){
             return this.nameFromStore
           },
           set(newName){
             return newName
           } 
        }
    }

Senin içinde mağazada

export const store = new Vuex.Store({
         state:{
             name : "Stackoverflow"
         },
         getters: {
                 name: (state) => {
                     return state.name;
                 }
         }
}

Benim için değişiyordu.

this.name = response.data;

Hesaplanan geri dönüşe göre;

this.$store.state.name = response.data;

Tamamen aynı hatayla karşılaşıyordum

Hesaplanan "callRingtatus" özelliği atandı, ancak ayarlayıcı yok

senaryoma göre örnek bir kod burada

computed: {

callRingtatus(){
            return this.$store.getters['chat/callState']===2
      }

}

Yukarıdaki kodu şu şekilde değiştiriyorum

computed: {

callRingtatus(){
       return this.$store.state.chat.callState===2
    }
}

hesaplanan kancanın içindeki alıcılar yerine vuex depo durumundan değerler getir