상태 변수 트리거 변환 오류

상태 변수 트리거 변환 오류

스토어 모듈에 다음 유사 코드가 있습니다.

const state = {
  users: []
}

const actions = {
 addUsers: async ({commit, state}, payload) => {
   let users = state.users // <-- problem
   // fetching new users
   for(let i of newUsersThatGotFetched) {
     users.push('user1') // <-- really slow
   }
   commit('setUsers',users)
 }
}

const mutations = {
  setUsers: (state, { users }) => {
    Vue.set(state, 'users', users)
   }
  }

이제 - 이 코드를 실행하면 다음 오류가 발생합니다.Error: [vuex] Do not mutate vuex store state outside mutation handlers.

엄격한 모드를 false로 설정하면 오류는 사라지지만 프로세스 시간은 정말 느립니다. 마치 오류가 여전히 발생하지만 표시되지 않는 것처럼 말입니다.

문제는 제가 언급한 부분인 것 같습니다.// <-- problem왜냐하면 내가 그 선을 바꾼 후에.

 let users = []

모든 것이 완벽하게 실행되지만, 나는 state.users의 데이터가 필요하기 때문에 그것을 가질 수 없습니다.

문제는 다음과 같습니다.users.push('user1')이것은 상태를 변형시키는 선입니다.

상태를 변경(쓰기 또는 변경)하는 모든 작업을 제거하고 해당 작업을 변환으로 이동합니다.

 addUsers: async ({ commit }, payload) => {
   // fetching new users
   commit('setUsers', newUsersThatGotFetched)
 }

그런 다음 변환에 새 사용자를 추가합니다.

const mutations = {
  setUsers: (state, users) => {
    state.users.concat(users);
    // or if you have custom logic
    users.forEach(user => {
      if (whatever) state.users.push(user)
    });
  }
}

속도가 느린 이유는 엄격 모드와 관련이 있습니다.

Strict 모드는 부적절한 돌연변이를 탐지하기 위해 상태 트리에서 동기식 심층 감시기를 실행하며, 상태에 대량의 돌연변이를 만들 경우 비용이 상당히 많이 들 수 있습니다.성능 비용을 방지하기 위해 프로덕션에서 반드시 전원을 끄십시오.

변환 속도를 높이려면 새 배열을 변경하여 준비 시 상태의 배열을 대체할 수 있습니다.

const mutations = {
  setUsers: (state, newUsers) => {
    state.users = newUsers.reduce((users, user) => {
      if (whatever) users.push(user);
      return users;
    }, state.users.slice()); // here, we start with a copy of the array
  }
}

언급URL : https://stackoverflow.com/questions/49754913/state-variable-triggers-mutation-error