更新资源时更新组件

时间:2019-04-07 21:45:20

标签: vue.js vuex

我创建了一个简单的待办事项应用程序,当从vuex商店中删除项目时,呈现待办事项列表的组件会自动更新。将待办事项从“待处理”更新为“已完成”时,组件不会自动更新。商店已更新,但我认为没有触发器会显示

  

嘿,数组中的资源已更新,请重新渲染

我如何强迫它这样做?

我创建了一个小例子来说明我的意思,如果删除待办事项,组件将更新。如果您单击“更新”按钮,则不会更改。

https://codesandbox.io/s/x3wv1yp33w

1 个答案:

答案 0 :(得分:2)

这是一个反应性问题:

  

Vue不允许动态添加新的根级别反应式   已创建实例的属性。但是,有可能   使用Vue.set(object,将反应性属性添加到嵌套对象   键,值)方法(source

在商店的UPDATE_TODO突变中,更改以下行:

state.todos[todoIndex] = updatedTodo

对此:

Vue.set(state.todos, todoIndex, updatedTodo)

,当然,请在文件顶部添加import Vue from 'vue'
它应该以这种方式工作。