Getting this error in nuxt: [vuex] do not mutate vuex store state outside mutation handlers

Question

i'm using nuxt.js and i want to pass current song time to vuex.

but passing data just working once.

this is my data:

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

mounted:

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;
  }
};

it's just working once, and after that, i get this error message:

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

i don't know what to do?

Answer 1

You are directly setting the component data as Vuex state, and this causes problem because when you modify the component data you also directly mutate the state outside the mutation handlers. A quick fix is to clone this object before assigning it as a vuex state:

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