Vuex/store :
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
todos: [
{id: 1, text: 'Wash dishes', done: false},
{id: 2, text: 'Do laundry', done: false},
{id: 3, text: 'Water plants', done: false},
{id: 4, text: 'Walk the dog', 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: 'Go hiking', done: false});
}
},
computed : {
...mapState(['todos']),
},
}
</script>
Upon clicking the button "Change object," the state in Vuex Dev Tools updates, but the displayed data in the Test.vue component does not change. The initial li item "Wash dishes" remains. Yet, when committing the changes in Vue Dev Tools, the update occurs. Uncertain of the mistake.
States states, "Whenever store.state.count changes, it will cause the computed property to re-evaluate, and trigger associated DOM updates."