Vue.js- Vuex 업데이트 - 구성 요소 DOM에 반영되지 않은 어레이 내부 상태

Vue.js- Vuex 업데이트 - 구성 요소 DOM에 반영되지 않은 어레이 내부 상태

Vuex/스토어:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        todos: [
            {id: 1, text: 'Clean kitchen', done: false},
            {id: 2, text: 'Clean bedroom', done: false},
            {id: 3, text: 'Clean bathroom', done: false},
            {id: 3, text: 'Clean clothes', done: true},
        ],
    },
    mutations: {
        x(state, data) {
            state.todos[0] = data;
        }
    },
});

export default store;

테스트.vue :

<template>
<div class="container">
    <ul>
        <li
            v-for="(item, i) in todos"
            :key="i"
        >
            <span class="description">{{ item.text }}</span>
            <span class="status">{{ item.status }}</span>
        </li>
    </ul>
    <button @click="x">Change object</button>
</div>

</template>

<script>
import { mapState } from 'vuex';

export default {
    methods: {
        x() {
            this.$store.commit('x', {id: 34, text: 'Celebrate birthday', done: false});
        }
    },
    computed : {
        ...mapState(['todos']),
    },
}
</script>

Change object(개체 변경) 버튼을 클릭하면 Vue Dev Tools에서 스토어의 상태가 변경되었지만 구성 요소 Test.vue에 의해 표시된 데이터는 변경되지 않고 첫 번째 리 항목 "Clean kitchen"이 남아 있는 것을 볼 수 있다.Vue Dev Tools의 변경 사항을 커밋하면 변경 사항이 발생한다.내가 뭘 잘못하고 있는지 모르겠어.

States https://vuex.vuejs.org/guide/state.html "store.state.count가 변경될 때마다 계산된 속성이 다시 설정되고 관련 DOM 업데이트가 트리거된다."

반응성 주의사항이 있으니, 사용하십시요.Vue.set함수:

 x(state, data) {
            Vue.set(state.todos,0,data);
        }

자세한 내용은 다음을 참조하십시오.

참조URL: https://stackoverflow.com/questions/63404747/vue-js-vuex-updating-an-object-within-an-array-inside-state-not-reflected-in-co