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

Question

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;测试视图：<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>单击“更改对象”按钮时，我可以在 Vue Dev Tools 中看到商店的状态已更改，但组件 Test.vue 显示的数据没有更改，第一个 li 项目“Clean kitchen”仍然存在。当我在 Vue Dev Tools 中提交更改时，更改发生了。不确定我做错了什么。状态https://vuex.vuejs.org/guide/state.html “每当 store.state.count 发生变化时，它都会导致计算属性重新评估，并触发相关的 DOM 更新。”

Answer 1

你有一个反应警告，所以你应该使用Vue.set函数：

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

有关更多详细信息，请检查此