Programing

Vuex - 데이터 개체 속성으로 복제된 상태, 어레이 항목을 삭제할 수 없음

c10106 2022. 5. 20. 21:18
반응형

Vuex - 데이터 개체 속성으로 복제된 상태, 어레이 항목을 삭제할 수 없음

내 상태를 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)
    }
}

내가 너를 오해하지 않았으면 좋겠어. 그래서 해결책은 다음과 같을 것 같아.

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

참조URL: https://stackoverflow.com/questions/52783907/vuex-cloned-state-into-data-object-property-cant-delete-array-item

반응형