상태 업데이트에도 불구하고 vuex 구성 요소가 업데이트되지 않는 이유

상태 업데이트에도 불구하고 vuex 구성 요소가 업데이트되지 않는 이유

페이지를 로드할 때 항목 목록을 가져온다.

원천

프로젝트의 출처는 온라인:

• optboxes 페이지;
• 저장(저장, 동작, 돌연변이, 게이터)

optboxes페이지

HTTP 요청은 적절한 데이터 전송 및 반환:

created(){
    this.getOptboxes();
},
components: {
    'optbox': OptboxComponent,
},
methods: {
    getOptboxes() {
        optboxes.all().then((response) => {
            this.setOptboxes(response.data.output);
    }).catch(() = > {
            this.no_optbox_message = 'there is no optbox';
        logging.error(this.$t('optboxes.get.failed'))
    });
    }
},
vuex: {
    actions: { setOptboxes: actions.setOptboxes},
    getters: { optboxesList: getters.retrieveOptboxes}
}

나는 다음과 같이 결과를 반복하고 있다.

<div v-for="optbox in optboxesList" class="panel panel-default">
     <optbox :optbox="optbox"></optbox>
</div>

저장하다

const state = {
    optboxes: {
        /*
        'akema': {
            hostname: "192.168.2.23",
            id: "akema",
            printers: [
                {
                    description: "bureau",
                    destination_port: 9100,
                    forward: "normal",
                    hostname: "1.2.3.4",
                    id: 0,
                    listening_port: 9102
                }
            ]
        }
        */
    }
};

질문

다른 페이지로 바꿔서 돌아오면 목록이 뜬다.나는 또한 Vuex 확장으로 내가 주를 약속하고 변화를 볼 수 있다는 것을 알아챘다.

변경 사항이 자동으로 적용되지 않는 이유

Change Detection 주의사항으로 인해 데이터 구조를 변경해야 했다.

JavaScript의 제한으로 인해 Vue.js는 어레이에 대한 다음과 같은 변경 사항을 감지할 수 없다.

• 예를 들어, 인덱스로 항목을 직접 설정할 때vm.items[0] = {};
• 예를 들어 배열의 길이를 수정할 때vm.items.length = 0.

저장하다

optboxes이제 배열이다.

const state = {
    optboxes:[]
}

그런 다음 어레이를 편집하도록 내 돌연변이를 업데이트하십시오.

반응성의 문제가 아닐까?!setOptbox 돌연변이가 vue에 의해 선택되지 않는 것 같아.

setOptboxes(state, optboxes) {
    for (var optbox of optboxes) {
        state.optboxes[optbox.id] = optbox;
    }
}

여기서 그것에 대해 읽을 수 있다.

https://vuejs.org/guide/list.html#Caveats

https://vuejs.org/guide/reactivity.html

문서 솔루션은 다음을 사용한다.

state.optboxes.$set(optbox.id, optbox);

보기 업데이트를 트리거할 수 있는.

사용.Vue.set나를 위해 그것을 쓰세요.여기 좀 봐.

참조URL: https://stackoverflow.com/questions/38813614/why-is-the-vuex-component-isnt-updated-despite-the-state-updating