在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)));