Vue.js- Vuex 更新数组中的对象，内部状态未反映在组件 DOM 中

Vuex/store :

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;

Test.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>

When the button "Change object" is clicked I can see in Vue Dev Tools the state of the store has changed but the data displayed by the component Test.vue has not changed and the first li item "Clean kitchen" remains. When I commit the changes in Vue Dev Tools the change happens. Not sure what I am doing wrong.

States https://vuex.vuejs.org/guide/state.html "Whenever store.state.count changes, it will cause the computed property to re-evaluate, and trigger associated DOM updates."

解决方案

You have a reactivity caveat, so you should use Vue.set function :

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

For more details check this