"변환 처리기 외부의 vuex 저장소 상태를 변환하지 않음"의 .pushends

"변환 처리기 외부의 vuex 저장소 상태를 변환하지 않음"의 .pushends

(동작, 상태, 돌연변이 및 게터)로 Vuex 스토어를 정의했습니다.

내 상태 배열에 새 작업관리를 돌연변이에 추가할 때 다음 오류가 발생했습니다. 오류: [vuex] 돌연변이 처리기 외부의 vuex 저장소 상태를 돌연변이로 만들지 않습니다.

const state = {
  todos: []
}

export default {
  ADD_TODO (state, payload) {
    state.todos.push(payload.todo)
  }
}

상태와 함께 배열을 사용할 수 없습니까?

저는 동작이 잘 되는 todos 상태를 위한 오브젝트를 사용하여 이것도 시도했습니다.

예를 들어 작업관리 변수가 데이터 섹션에서 오는 경우 포인터 문제일 수 있습니다.

/** Component **/
data () {
  todo : {
    // whatever
  }
},
methods: {
  addTodo () {

    // Will add same todo reference to state list
    // which can cause “Do not mutate vuex store state outside mutation 
    // handlers” exception

   ADD_TODO({todo : this.$data.todo}) 

  }
},

전체 작업관리 배열을 전달하는 대신 목록에 추가하기 전에 다음과 같이 작업관리 항목을 참조 취소할 수 있습니다.

const _todo = Object.assign({}, todo)
ADD_TODO({todo : _todo}) // call store action

상태 자체를 변경할 수 없습니다. 상태를 변경하려면 상태에 새 값을 할당해야 합니다. 이 경우 다음 작업을 수행할 수 있습니다.

당신의 구성요소에서 당신의 작업관리를 스토어에서 같은 변수에 할당합니다.

//COMPONENT
let todos = [...this.$store.todos] //or assign from a getter if you have one;
todos.push(newTodo);
addTodo(todos); //call mutation from component and pass your todos array as payload


//STORE
ADD_TODO (state, payload) {
  state.todos = payload;
}

언급URL : https://stackoverflow.com/questions/44651916/push-end%c2%b4s-in-do-not-mutate-vuex-store-state-outside-mutation-handlers