Обновление данных из Vuex дает бесконечный цикл в watcher

1

У меня есть "тупой" компонент, который просто получает реквизиты от родителя. Пользователь может изменить селектор, который запускает действие (используя Vuex) для получения новых данных. Когда эти новые данные были получены, я хочу передать его дочернему элементу и повторно отобразить этот компонент с новыми данными. К несчастью, я продолжаю получать это предупреждение в своем наблюдателе. Пожалуйста, помогите:

export default {
  name: 'bubbles',
  props: {
    awesomeData: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      title: 'Best component ever'
    }
  },
  watch: {
    awesomeData (newData) {
      console.log('hello world')
      this.refreshSomethingAwesome(newData)
    }
  },
  methods: {
    refreshSomethingAwesome (newData) {}
  }
}

s

101 hello world
[Vue warn]: You may have an infinite update loop in watcher with expression "awesomeData"

Я пытаюсь найти решение почти точно так же, как это: Примеры Vuex Но не может показаться, что он работает... hmmm

Теги:
vue.js
vuex

1 ответ

0

Выяснил причину, по которой я получал цикл, потому что я на самом деле пытался сортировать измененные данные из свойства (считая его неизменным)

let options = {
 children: newData.sort((a, b) => a.value - b.value)
}

Я изменил его на что-то вроде:

const sortedNewData = [...newData].sort((a, b) => a.value - b.value)

let options = {
 children: sortedNewData
}

Примечание. Чтобы предотвратить это в моем приложении, я мог бы перенести свое начальное состояние в Map из immutable.js

import { Map, fromJS } from 'immutable'

const initialState = Map({
 awesomeData: fromJS([])
})

Полезная статья: alligator.io

Ещё вопросы

Сообщество Overcoder
Наверх
Меню