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 更新。”
开心每一天1111
相关分类