첫 번째 로드에서만 mapGetters의 반응성 문제

첫 번째 로드에서만 mapGetters의 반응성 문제

는 ★★★★★★★★★★★★★★를 사용하고 있습니다.mapGettersVueX의 도우미입니다만, 페이지의 첫 로드에만 문제가 있어, 반응하지 않습니다.요 :

변경을 트리거하는 my html 템플릿:

<input type="number" value="this.inputValue" @change="this.$store.dispatch('setInputValue', $event.target.value)">

그 값을 받는 나의 가게

{
    state: {
        appValues: {
            inputValue: null
        },
    },
    getters: {
        getInputValue: (state) => {
            return state.appValues.inputValue;
        },
    },
    mutations: {
        setInputValue(state, value) {
            state.appValues.inputValue = value;
        },
    },
    actions: {
        setInputValue(context, payload) {
            return new Promise((resolve, reject) => {
                context.commit('setInputValue', payload);
                resolve();
            });
        },
    }
}

그리고 내 컴포넌트가 스토어를 듣고 있습니다.

import {mapGetters} from 'vuex';

computed: {
    ...mapGetters({
        inputValue: 'getInputValue',
    }),
}
watch: {
    inputValue: {
        deep: true,
        immediate: true,
        handler(nVal, oVal) {
            console.log("inputValue", nVal, oVal);
        }
    },
}

이 console됩니다."inputValue" null undefined제 스토어에 아무것도 없기 때문에 디폴트값 null이 부여됩니다.

하지만 지금은 이상한 부분이야.입력값을 변경해도 콘솔에 아무것도 표시되지 않습니다.아무것도 움직이지 않아...

다음 시 이 console.됩니다."inputValue" 5 undefined(5는 이전에 입력한 값입니다)그래서 이전에 입력을 변경했을 때 매장 내 값은 잘 유지되고 있었지만 계산값 자체는 갱신되지 않았습니다.

됩니다."inputValue" 7 5그래서 처음부터 제가 하고 싶은 대로 하고 있어요.

제가 뭘 잘못했나요?첫 번째 부하에서 계산된 값이 반응하지 않는 이유는 무엇입니까?

답변 감사합니다...

이 문제를 해결하는 가장 좋은 방법은 로컬 변수를 워처에 저장한 후 로컬이 변경되면 vuex를 업데이트하는 것이라고 생각합니다.

컴포넌트:

<input type="number" v-model="value">

data() {
    return {
        value: ''
    };
},

computed: {
    ...mapGetters({
        inputValue: 'getInputValue'
    })
}

watch: {
    value(value){
        this.$store.dispatch('setInputValue', value);
    },

    inputValue(value) {
        console.log('inputValue', value);
    }
},

created() {
    // set the initial value to be the same as the one in vuex
    this.value = this.inputValue;
}

다음 샘플을 봐주세요.https://codesandbox.io/s/vuex-store-ne3ol

요, 사용하시는 this키워드를 지정합니다. 않는 것이 좋다this템플릿 코드로 지정합니다.

<input
      type="number"
      value="inputValue"
      @change="$store.dispatch('setInputValue', $event.target.value)"
    >

getter만 사용할 수 합니다.mapState상태를 되돌립니다.

템플릿에 몇 가지 작은 오류가 있습니다.다음과 같이 해야 합니다.

<input type="number" :value="inputValue" @change="$store.dispatch('setInputValue', $event.target.value)">

제했니 the the the the the the 를 제거했습니다.this.서...라고...:의 value이러한 변경을 실시하면, 모든 것이 예상대로 동작합니다.this.$store버전 2.6.10

말하면, 당신은 가하, 우,, 우,를 사용하고 .change DOM 입니다. DOM이 되다.change입력만 하면 콘솔에 아무것도 표시되지 않습니다.사용하시는 게 좋을 것 같아요.input키를 누를 때마다 업데이트되도록 하려면 이 옵션을 선택합니다. '하다'를 .v-modelgetter 및 setter를 사용합니다(https://vuex.vuejs.org/guide/forms.html#two-way-computed-property) 참조).

변경 이벤트를 일으킨 페이지를 새로고침할 때 필드가 흐려진 것 같습니다.

좋아, 그럼...문제를 발견했는데, 그것은 예시와 관련이 없습니다.이유는 설명할 수 없지만, 방법을 설명하겠습니다.

저희 가게에는 다음 방법이 있습니다.

mutations: {
    deleteAppValues(state) {
        state.appValues = null;
    }
}

로그아웃에서 사용 중이거나 사용자가 처음 페이지에 나타나 로그인하지 않았을 때...그래서 어떻게 된 거야?

1. 사용자가 먼저 페이지를 로드하고 스토어가 올바르게 초기화되며 인덱스가 표시됩니다.inputValuenull 값으로 초기화되어 있기 때문에 존재합니다.
2. ...하지만 사용자가 기록되지 않았기 때문에 스토어를 파기하고 inputValue가 null과 같지 않습니다.그냥 존재하지 않습니다.
3. 사용 시도 중mapGetters존재하지 않는 것은 반응성이 없기 때문에 변경을 디스패치하면 스토어 키가 작성되지만 mapGetters가 기존 키로 초기화되었기 때문에 반응성이 들리지 않습니다.
4. 페이지를 새로고침한 후, 키는 스토어에 존재하기 때문에 getter를 부착할 수 있고, 모든 것이 정상적으로 동작하고 있습니다.

이게 바로 내 코드에 문제가 생긴 이유야제대로 작동시키기 위해 파괴 돌연변이를 다음과 같이 변경했습니다.

mutations: {
    deleteAppValues(state) {
        state.appValues = {
            inputValue: null,
        };
    }
}

이와 같이 스토어 객체의 inputValue 키는 항상 존재하므로 getter가 반응성을 잃지 않습니다.

나는 간단한 질문을 하려고 했지만, 그것이 내 코드의 나쁜 부분을 잊게 했다, 미안해.

언급URL : https://stackoverflow.com/questions/56986389/reactivity-problem-with-mapgetters-only-on-first-load