强制组件在路线更改或vuex状态更改时重建

Question

我想进入VueJs / Vuex，并创建一个小型的待办应用程序。有“所有待办事项”，“待办事项”和“已完成事项”三个链接。这是一条相同的路线，但具有不同的filter查询。

更改路线时，组件不会更新，因为更新的查询似乎并没有强制组件更新。但是computed事件被触发。

我创建了一个显示当前问题的小例子

https://codesandbox.io/s/6zx2p0m20r

如果单击待办事项链接，则不会更新组件。如果您转到“另一条路线”并返回，则组件已更新（因为路线完全不同）。

如何在同一基本路径内的查询更新中强制更新组件？

Answer 1

您可以添加beforeRouteUpdate导航保护以重新初始化数据：

  

beforeRouteUpdate在呈现该组件的路径发生更改时被调用，   但是此组件已在新路径中重复使用。

     

例如，对于具有动态参数/foo/:id的路线，当我们   在相同的/foo/1组件实例/foo/2和Foo之间导航   将被重用，并且在发生这种情况时将调用此钩子。

     

（source）

---

beforeRouteUpdate(to, from, next) {
  this.currentTodoFilter = to.query.filter
  next()
}

您还可以通过这种方式删除updateTodoFilter方法。