Question

我正在将Vuex与用于过滤大量数据的吸气剂配合使用，然后某些组件按状态将其呈现给用户。用户可以将每个状态的可见元素计数增加5。Vuex存储区上当前有多少可见项目，并且吸气剂使用它来创建“查看对象”。

当我更新此可见性对象时，getter不会重新运行，因此依赖项跟踪中的某些内容会消失。我没有添加或删除属性，只是为了确定我仍在使用Vue.set(...)。

这是一种突变，可增加状态的可见项数量：

  viewMore(state, status) {
    console.log('viewMore')
    const current = state.visibility.statuses[status]
    Vue.set(state.visibility.statuses, status, current + 5)
  }

此突变运行良好，并且我可以在开发人员工具中看到可见性如何随每次提交而增加。现在是依赖于此数据的吸气剂：

  visibleProspects(state, getters) {
    console.log('visibleProspects')
    let result = {}
    for (const status in getters.sourceData) {
      if (!result[status]) {
        result[status] = { prospects: [] }
      }
      getters.sourceData[status].forEach(function(prospect) {
        if (result[status].prospects.length < state.visibility.statuses[status])
          result[status].prospects.push(prospect)
      })
    }
    return result
  }

这是遍历一个名为sourceData的复杂getter（为简便起见，此处未显示），然后根据有多少可见项，它返回一个数组中具有最大值的新结构。然后visibleProspects被我的组件使用，并且第一次运行一切正常，或者更新了sourceData计算的数据（例如，添加/编辑/删除潜在客户）。我确实修改了state.visibility.statuses并没有强迫visibleProspects重新计算。

我该如何调试呢？

Answer 1

您可以制作深层副本以使其具有反应性（使用appendPrototype

JSON.parse(JSON.stringify())

Answer 2

@ittus的答案应该起作用。但是，如果您的状态很大，则克隆操作将很繁琐。

或者，您可以尝试在根状态Vue.set上使用state.visibility。这应该使反应性按预期工作。

Vue.set(state.visibility, 'statuses', {
    ...state.visibility.statuses,
    [status]: current + 5
})

我的Vuex吸气剂没有自动更新..我如何调试它？

2 个答案: