在 nuxt 中出现此错误：[vuex] 不要在突变处理程序之外改变 vuex 存储状态

Posted 2023-03-16

【中文标题】在 nuxt 中出现此错误：[vuex] 不要在突变处理程序之外改变 vuex 存储状态

【英文标题】：Getting this error in nuxt: [vuex] do not mutate vuex store state outside mutation handlers

【发布时间】：2019-09-04 03:13:52

【问题描述】：

我正在使用 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.

我不知道该怎么办？

【参考方案1】：

您直接将组件数据设置为Vuex 状态，这会导致问题，因为当您修改组件数据时，您还会直接在突变处理程序之外改变状态。一个快速的解决方法是在将其分配为vuex 状态之前克隆此对象：

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