Данные диаграммы объекта перезаписываются, но затрагивается только первый объект, с которым взаимодействует

Question

Вот эта песочница для кода, подтверждающая и демонстрирующая эту проблему: https://codesandbox.io/embed/ql4rm9734w?fontsize=14

Когда пользователь нажимает кнопку в приложении.Виджет предназначен для отображения данных этого объекта.Объект содержит массив, который используется для создания графика.Кажется, что нажатие кнопки первого объекта отображается и работает правильно.Так же, как второй и третий.Но когда снова нажимается первая кнопка объектов, свойство данных диаграммы объекта перезаписывается данными диаграммы ранее нажатого объекта.

Приложение было создано в Vue.Js, с официальными Highcharts и Highcharts.Vue оболочка рендеринга графиков.Данные хранятся в магазине Vuex.

Страница заполняется кнопкой для каждого объекта.При нажатии кнопки объектов запускается пользовательское событие, содержащее данные объекта.Обработчик события щелчка объекта мутирует хранилище, передавая объект в хранилище для сохранения в качестве активного объекта маркера.Виджет объекта, который отображает данные для пользователя, получает свои данные из хранилища активного маркера объекта.

этот процесс отлично работает для любого другого объекта, который использует эту систему.Он также влияет только на первый объект, на который нажали, все последующие объекты не изменяются и работают правильно.

Я безуспешно попробовал следующее

• Инструменты и отладка Vue dev, показывает симптомы ошибки, но не указывает, где произошла ошибка.
• Я пытался сделать свойство данных псевдо-частным свойством, доступ к которому можно получить только с помощью сеттеров и геттеров.Сеттер никогда не вызывается.
• Добавлено второе свойство в классе, чтобы действовать как неизмененная переменная хранения для исходных данных, данных во время построения.Это второе свойство также изменяется.
• При глубоком рассмотрении хранилища выглядело, как будто массив объектов в хранилище не был затронут этой ошибкой.Однако при рефакторинге для непосредственного использования объекта из магазина ошибка все еще существует.
• Я пытался выделить данные в отдельное свойство состояния, которое не имеет прямого отношения к объекту ... все та же ошибка.
• Я также пытался с каждым маленькиммассив данных (15 элементов) все еще ошибка сохраняется.
• Я даже создал мини-проект реплики в надежде, что в малом масштабе ошибка не появится, и, надеюсь, это будет глупая опечатка или что-то еще ..но, опять же, даже эта мини-версия моего приложения все еще показывает ошибку.Мини-версию можно найти здесь: https://github.com/ChadRoberts21/ChartMapBug
• Встроенный более тонкий уменьшенный пример: https://codesandbox.io/embed/ql4rm9734w?fontsize=14

Код доступен с https://codesandbox.io/embed/ql4rm9734w?fontsize=14

Я ожидаю, что правильные данные диаграммы всегда отображаются в виджете объекта, и для свойства объекта вообще не будет переопределено его свойство данных, если только я явно не решу сделать это в мутации Vuex.

Answer 1

Проблема возникает из-за того, что Highcharts мутирует данные, что не совсем соответствует концепции Vue. Как правило, если вы можете избежать мутации данных, вам не следует этого делать вообще. Я только что ответил на этот вопрос непосредственно в репозитории highcharts-vue, поэтому там вы можете найти более подробное описание причин возникновения проблемы.

В сущности (для других пользователей, которые ищут ответ на этот вопрос), лучшим выходом из проблемы будет применение оператора распространения при назначении новых данных в серии:

FooWidget.vue ( chartOptions () вычисляемая часть свойства)

series: [{
    showInLegend: false,
    type: "column",
    color: this.foo.colour,
    data: [...this.foo.data],
    pointInterval: this.foo.interval,
    pointStart: this.foo.startPoint,
    gapSize: 4,
    tooltip: {
        valueDecimals: 2
    },
    fillColor: {
        linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
        }
     },
     threshold: null
 }]

Живой пример: https://codesandbox.io/s/w2wyx88vxl

С наилучшими пожеланиями!

Answer 2

Я думаю, проблема в том, что вы используете компьютер для получения данных. когда вы передаете данные в событие click, это фактически обновленный массив foos хранилища (ссылка на state.foos). поэтому при нажатии на test2 данные в хранилище массива foos обновляются.

Попробуйте консоль журнала foos в методе store setActiveFoo, вы увидите, что массив foos обновляется другими значениями.

setActiveFoo(state, payload) {
      console.log("In store foos")
      console.log(state.foos);
      state.activeFoo = payload;
    }

Попробуйте этот код. Я думаю, что вам нужно отправить копию массива foos в computed, это решит проблему.

computed: {
    foos() {
      return JSON.parse(JSON.stringify(this.$store.getters.foos));
    },
    activeFoo() {
      return JSON.parse(JSON.stringify(this.$store.getters.activeFoo));
    }
  }