[vue.js] Vuex-계산 된 속성“name”이 할당되었지만 setter가 없습니다.

Program / 글쓴이

양식 유효성 검사가있는 구성 요소가 있습니다. 다단계 결제 양식입니다. 아래 코드는 첫 번째 단계입니다. 사용자가 텍스트를 입력했는지 확인하고 이름을 전역 상태로 저장 한 다음 다음 단계로 전송하고 싶습니다. 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.

이름 필드의 값을 전역 상태에 어떻게 바인딩합니까? 사용자가 한 단계 뒤로 돌아가도 ( “다음 단계”를 클릭 한 후)이 단계에서 입력 한 이름을 볼 수 있도록이 정보가 지속적으로 유지되기를 바랍니다.

답변

v-model계산에 가려면 setter가 필요합니다 . 업데이트 된 값으로 무엇을하든 (아마 $store게터가 가져 오는 것을 고려할 때 아마도에 작성하십시오 ) 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;

답변

이 경고가 나타나는 이유를 언급하고 싶습니다. 계산 된 값을 만들 때마다 기본적으로 getter이므로 계산 된 속성에 대한 setter를 명시 적으로 정의해야합니다.

VueJs, Computed Setter의 문서에서 언급했듯이

계산 된 속성은 다음과 같습니다.

   name: {
       get: function () {
          return yourName
       },
       set: function (newName) {
          return yourNewName
       }

더 적절한 방법은 mapState상점에서 이름을 가져 오는 데 사용 하고 상점에서 getter를 정의 mapGetters하고 상점에서 이름을 추출 하는 데 사용 하는 다른 옵션을 사용 하는 것입니다.

알아 두어야 할 중요한 사항 : 저장소의 게터는 저장소에서 계산 된 데이터를 가져 오려고 할 때 사용되며, 이때 계산 된 데이터를 가져 오는 게터에서 논리를 정의합니다.

게터의 예

getters = {
  isLoggedIn (state) {
    return !!state?.activeUser?.id
  }
}

이 게터는 활성 사용자의 상태를 확인하고 로그인하면 true를 반환하고 로그인하지 않으면 false를 반환합니다.

나중에 전체 응용 프로그램 mapGetters에서이 isLoggedIn속성 을 추출 하고 그에 따라 검사를 추가하는 데 사용합니다.

누군가이 도움이 가득 차기를 바랍니다. 🙂

답변