Мой Vuex getter не обновляется автоматически .. как я могу его отладить?

Question

Я использую Vuex с геттером, который фильтрует много данных, а затем некоторые компоненты представляют их пользователю, сгруппированному по статусу.Пользователь может увеличить количество видимых элементов в статусе на 5. Сколько элементов отображается в данный момент в хранилище Vuex, и получатель использует его для создания «Просмотр объекта».

Когда я обновляю этот объект видимостигеттер не запускается повторно, поэтому что-то в отслеживании зависимостей пошло на юг.Я не добавляю и не удаляю свойства, но все же использую 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 (для краткости не показан здесь) и затем в зависимости от количества видимых элементов возвращаетновая структура с этим максимумом в массиве.visibleProspects затем используется моими компонентами, и все работает нормально в первый раз или если обновление данных, которые вычисляет sourceData (например, добавление / редактирование / удаление потенциального клиента) .. но независимо от того, что я делаю, изменяяstate.visibility.statuses не заставляет visibleProspects пересчитать.

Как я могу отладить это?

Answer 1

@ Иттус ответ должен работать.Но операция клонирования будет тяжелой, если у вас большое состояние.

альтернативно, вы можете вместо этого попробовать Vue.set в корневом состоянии state.visibility.Это должно заставить реактивность работать как ожидалось.

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

Answer 2

Вы можете сделать глубокое копирование, чтобы сделать его реактивным (используя 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))
}