Vuex - คุณสมบัติที่คำนวณ "ชื่อ" ถูกกำหนดให้ แต่ไม่มีตัวตั้งค่า

ฉันมีส่วนประกอบที่มีการตรวจสอบความถูกต้องของรูปแบบบางอย่าง เป็นแบบฟอร์มการชำระเงินหลายขั้นตอน โค้ดด้านล่างนี้ใช้สำหรับขั้นตอนแรก ฉันต้องการตรวจสอบว่าผู้ใช้ป้อนข้อความบางส่วนเก็บชื่อไว้ในสถานะส่วนกลางแล้วส่งไปยังขั้นตอนถัดไป ฉันใช้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.

ฉันจะผูกค่าจากฟิลด์ name กับ global state ได้อย่างไร ฉันต้องการให้สิ่งนี้คงอยู่ต่อไปเพื่อที่แม้ว่าผู้ใช้จะย้อนกลับไปหนึ่งก้าว (หลังจากคลิก "ขั้นตอนถัดไป") พวกเขาจะเห็นชื่อที่ป้อนในขั้นตอนนี้

หากคุณกำลังจะv-modelคำนวณก็ต้องมีตัวตั้งค่า ไม่ว่าคุณต้องการให้ทำอะไรกับค่าที่อัปเดต (อาจเขียนถึงสิ่งที่คุณต้องการ$storeโดยพิจารณาว่าเป็นสิ่งที่ getter ดึงมาจาก) คุณทำใน setter

ถ้าเขียนมันกลับไปที่ร้านที่เกิดขึ้นผ่านการส่งแบบฟอร์มที่คุณไม่ต้องการคุณเพียงต้องการที่จะตั้งค่าv-model:value

หากคุณต้องการมีสถานะกลางซึ่งบันทึกไว้ที่ใดที่หนึ่ง แต่ไม่ได้เขียนทับซอร์สในการ$storeส่งแบบฟอร์มจนกว่าคุณจะต้องสร้างรายการข้อมูลดังกล่าว

มันควรจะเป็นแบบนี้

ในส่วนประกอบของคุณ

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

ในร้านของคุณ

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

สำหรับฉันมันกำลังเปลี่ยนไป

this.name = response.data;

ผลตอบแทนจากการคำนวณเป็นอย่างไร

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

ฉันพบข้อผิดพลาดเดียวกัน

คุณสมบัติที่คำนวณ "callRingtatus" ถูกกำหนดให้ แต่ไม่มีตัวตั้งค่า

นี่คือโค้ดตัวอย่างตามสถานการณ์ของฉัน

computed: {

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

}

ฉันเปลี่ยนรหัสด้านบนเป็นวิธีต่อไปนี้

computed: {

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

ดึงค่าจากสถานะการจัดเก็บ vuex แทน getters ภายในเบ็ดที่คำนวณ