Question

我已将状态从Vuex克隆到组件data()中的数组中。我的问题是，当我尝试使用shift()从克隆中删除数组中的第一项，同时又使用unshift()将其添加回时，出现此错误消息：

[vuex]请勿在变异处理程序之外对vuex存储状态进行变异。

如何删除处于克隆状态的，不会影响实际状态的东西？

保存/克隆

    beforeMount () {
        this.traningArea = this.stateExercises
    },
    computed: {
        ...mapState({
            userStore: state => state.userStore,
            tsStore: state => state.trainingSchemeStore
        }),
        stateExercises () {
            return this.tsStore.schemeExercises
        }
    }

尝试点击运行shift()，如果用户再次点击，则运行unshift()

this.traningArea[0].shift()
this.traningArea[0].unshift(obj)

在这里，我遇到了这个错误。

状态

const state = {
    trainings: []
}

const actions = {
    getTrainingExercise: ({commit}, ids) => {
        var payload = {
           'trainings_id': ids
        }

        return Vue.http.post(getTrainingsById, payload, 
        {headers: getHeader()})
        .then(response => {
            if (response.status === 200) {
                commit('SET_TERL', response.body.data)
            }
        })
  },

const mutations = {
    SET_TERL(state, trainings) {
       state.trainings.push(trainings)
    }
}

Answer 1

我希望我不要误会你，所以我认为解决方案是这样的：

  const mutations = {
      SET_TERL(state, trainings) {
       state.trainings.push(trainings)
      },
       SHIFT(state, index) {
       state.trainings[index].shift() 
      },
     UNSHIFT(state, index,obj) {
       state.trainings[index].unshift(obj) 
      }
   }

以及调用方法时：

 this.tsStore.commit("SHIFT",0);

或

  this.tsStore.commit("UNSHIFT",0,obj);

Vuex-克隆状态为数据对象属性，无法删除数组项

1 个答案: