我的 Vuex getter 没有自动更新。我该如何调试它？答案

【问题标题】：My Vuex getter is not getting automatically updated.. how I can debug it?我的 Vuex getter 没有自动更新。我该如何调试它？
【发布时间】：2019-05-25 02:57:38
【问题描述】：

我将 Vuex 与过滤大量数据的 getter 一起使用，然后一些组件将其按状态分组呈现给用户。用户可以将每个状态的元素的可见计数增加 5。当前可见的项目数量在 Vuex 存储中，getter 使用它来创建“视图对象”。

当我更新此可见性对象时，getter 不会重新运行，因此依赖项跟踪中的某些东西会向南。我没有添加或删除属性，我仍然使用Vue.set(...) 来确定。

这是增加状态项目可见数量的突变：

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

这种突变运行良好，我可以在开发人员工具中看到可见性如何随着每次提交而反应性地增加。现在这里是依赖于这些数据的 getter：

  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 重新计算。

如何调试？

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

您可以进行深层复制以使其具有反应性（使用JSON.parse(JSON.stringify())

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

【讨论】：

如果它不是反应式的.. 1) 为什么开发工具正在更新？ 2）我如何以编程方式查看某个级别的某些属性是否是反应性的？奇怪的是，我在状态上使用了其他深度嵌套的结构，它们是反应性的（意味着 getter 在修改它们后得到更新）..
如果您在 state.visibility 上使用 Vue.set，它将起作用。但是如果更改state.visibility.statuses 它将不起作用，因为state.visibility 仍然指向旧参考。
我会尝试.. 但这意味着只有状态的第一个孩子是反应性的？这与我以前见过的一切背道而驰..

【解决方案2】：

@ittus 的答案应该有效。但是如果你的状态很大，克隆操作会很繁重。

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

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

【讨论】：