vue.js - Vuex - 将状态克隆到数据对象属性中，无法删除数组项

Question

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

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

如何删除克隆状态中不影响实际状态本身的内容？

保存/克隆

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