【发布时间】:2019-04-08 06:05:51
【问题描述】:
我创建了一个简单的 todo 应用程序,当从我的 vuex 存储中删除一个项目时,渲染 todo 列表的组件会自动更新。将待办事项从“待处理”更新为“已完成”时,组件不会自动更新。商店已更新,但我认为没有触发器显示
嘿,数组中的资源已更新,请重新渲染
如何强制它这样做?
我创建了一个小示例来说明我的意思,如果您删除一个待办事项,该组件将更新。如果你点击“更新”按钮,它不会改变。
【问题讨论】:
我创建了一个简单的 todo 应用程序,当从我的 vuex 存储中删除一个项目时,渲染 todo 列表的组件会自动更新。将待办事项从“待处理”更新为“已完成”时,组件不会自动更新。商店已更新,但我认为没有触发器显示
嘿,数组中的资源已更新,请重新渲染
如何强制它这样做?
我创建了一个小示例来说明我的意思,如果您删除一个待办事项,该组件将更新。如果你点击“更新”按钮,它不会改变。
【问题讨论】:
这是一个反应性问题:
Vue 不允许动态添加新的根级响应式 属性到已经创建的实例。然而,有可能 使用 Vue.set(object, 键、值)方法(source)
在您商店的 UPDATE_TODO 突变中,更改此行:
state.todos[todoIndex] = updatedTodo
到这里:
Vue.set(state.todos, todoIndex, updatedTodo)
当然,在文件顶部添加import Vue from 'vue'。
它应该以这种方式工作。
【讨论】: