Vuex - 계산된 속성 "name"이(가) 할당되었지만 세터가 없음

Vuex - 계산된 속성 "name"이(가) 할당되었지만 세터가 없음

양식 검증이 있는 구성요소가 있어다단계 체크아웃 양식이다.아래 코드는 첫 번째 단계를 위한 것이다.사용자가 텍스트를 입력했는지 확인하고 이름을 글로벌 상태로 저장한 후 다음 단계로 전송하십시오.ve-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계산한 사람, 세터가 필요해업데이트된 값으로 원하는 작업(아마도 이 값을 에 기록)$store세터 안에서 당신이 하는 일이 바로 그것이라는 것을 고려한다면.

서식을 제출하여 스토어에 다시 쓴다면, 당신은 그것을 원하지 않는다.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 저장소 상태에서 값 가져오기

그쪽에서 가치를 얻을 때 그런 오류가 있었다.store에computed, 경유...mapState(['sampleVariable']), 너처럼.그럼 나는 그 제품을 사용했네.this.sampleVariable에<script>그리고sampleVariable에<template>.

문제를 해결한 것은 다음과 같았다.return이 안에data(), 분리된 변수에 할당하고 전체에서 재사용component새로 생성된 변수, 이와 같이:

data() {
  return {
    newVariable: this.$store.state.sampleVariable,
  }
}

그러면 구성 요소의 참조를 다음에서 변경했다.sampleVariable로newVariable, 그리고 오류는 사라졌다.

참조URL: https://stackoverflow.com/questions/46106037/vuex-computed-property-name-was-assigned-to-but-it-has-no-setter