Vuex - Cloned state into data object property, can't delete array item

Question

I've cloned my state from Vuex to an array in my component, data(). My problem is when I'm trying to remove the first item in the array from my clone with shift()and also add it back with unshift() I get this error msg:

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

How can I delete something in my cloned state that's not effects the actually state itself?

Saving/cloning

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

Trying to run shift() on click and unshift() if user click again

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

And it's here I've got this error.

STATE

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

you could add function in your mutations object to handle that operation — Boussadjra Brahim
Can you give me an example on that function? How it should look and so on.. I'm pretty lost here ^^ — nahoj

Boussadjra Brahim Boussadjra Brahim · Accepted Answer · 2018-10-12T17:24:09

i hope that i don't misunderstand you, so i think that the solution would be like this :

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

and when you call the method :

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

or

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

Vuex - Cloned state into data object property, can't delete array item

1 Answers