Получение этой ошибки в nuxt: [vuex] не изменяет состояние хранилища vuex вне обработчиков мутаций

Question

Я использую nuxt.js и хочу передать текущее время песни в vuex.

, но передача данных работает только один раз.

это мои данные:

currentSongTime: {
          second: 0,
          minute: 0,
          total: 0
        }

установлен:

this.WaveSurfer.on('seek', (position) => {
        this.currentSongTime.second = parseInt(position * this.WaveSurfer.getDuration() % 60);
        this.currentSongTime.minute = parseInt((this.WaveSurfer.getCurrentTime() / 60) % 60);
        this.currentSongTime.total = parseInt(position * this.WaveSurfer.getDuration());

        this.$store.commit('setCurrentSongTime', this.currentSongTime);
      });

index.js (vuex):

export const state = () => ({
  currentAudioTime: {}
});

export const mutations = {
  setCurrentSongTime(state, val) {
    state.currentAudioTime = val;
  }
};

это просто работает один раз, и после этого я получаю это сообщение об ошибке:

[vuex] do not mutate vuex store state outside mutation handlers.

я не знаю, что делать?

Answer 1

Вы непосредственно устанавливаете данные компонента как состояние Vuex, и это вызывает проблему, потому что при изменении данных компонента вы также непосредственно изменяете состояние вне обработчиков мутации.Быстрое решение состоит в том, чтобы клонировать этот объект, прежде чем присвоить ему состояние vuex:

this.$store.commit('setCurrentSongTime', JSON.parse(JSON.stringify(this.currentSongTime)));