为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

繁花如伊 2023-01-06 15:42:06

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 更新。”


查看完整描述

1 回答

?
开心每一天1111

TA贡献1578条经验 获得超11个赞

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


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

有关更多详细信息,请检查


查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 12 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信