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;測(cè)試視圖:<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>單擊“更改對(duì)象”按鈕時(shí),我可以在 Vue Dev Tools 中看到商店的狀態(tài)已更改,但組件 Test.vue 顯示的數(shù)據(jù)沒(méi)有更改,第一個(gè) li 項(xiàng)目“Clean kitchen”仍然存在。當(dāng)我在 Vue Dev Tools 中提交更改時(shí),更改發(fā)生了。不確定我做錯(cuò)了什么。狀態(tài)https://vuex.vuejs.org/guide/state.html “每當(dāng) store.state.count 發(fā)生變化時(shí),它都會(huì)導(dǎo)致計(jì)算屬性重新評(píng)估,并觸發(fā)相關(guān)的 DOM 更新?!?
Vue.js-Vuex 更新?tīng)顟B(tài)數(shù)組中的對(duì)象未反映在組件 DOM 中
繁花如伊
2023-01-06 15:42:06