더 나은 접근 방식 처리: 'vuex 저장소 상태를 돌연변이 처리기 외부에서 변경하지 않음' 오류

더 나은 접근 방식 처리: 'vuex 저장소 상태를 돌연변이 처리기 외부에서 변경하지 않음' 오류

사전:내 지원서는 의도한 대로 작동하고 있지만, 내가 가지고 있던 문제에 더 나은 접근법이 있는지 알고 싶다.

상황:나는 현재 허가제를 도입하고 있는 프로젝트가 있다.전류 흐름은 특정 물체를 로드하는 경우(lets take to load objects)user와 이씨) 및inject그 후의 허가

문제:vuex-action 내부 오류. 'vuex store state outside mute handler' 외부에서 vuex store를 변경하지 마십시오.

질문:아래 나의 접근법보다 오류를 생략하는 더 좋은 방법이 있을까?

단순화(여기서 API에서 개체를 가져와서 vuex-store에 저장):

// user.js (vuex-module)
state: {
  user: null,
},
mutations: {
  // ... 
  setUser(state, user) {
      state.user = user
  }
}
actions: {
  // ... other vuex-actions
  async login({commit, dispatch}, payload) {
      let userFromDb = DbUtil.getUser(payload) // is an axios call to our api

      // here the permissions get injected
      // action in another vuex-module
      dispatch('permissions/injectPermissions', userFromDb)

      // commiting to store
      commit('setUser', userFromDb)

      return userFromDb
  }
}

내 권한.js(여기서 내 개체에 권한을 주입하는 중):

// permissions.js (vuex-module)
actions: {
  // ... other vuex-actions

  // payload = user in this example
  async injectPermissions({commit, dispatch}, payload) {
      let permissionFromDb = DbUtil.getPermissions(/* ... */) 

      payload.permissions = permissionFromDb // -> Here I am getting 'Do not mutate vuex store state outside mutation handlers.'-Error, because `payload` == the user from user-state

      return payload
  }
}

해결 방법:돌연변이 손잡이 안에 나를 위해 사용자 상태 개체를 바꾸는 돌연변이를 추가했다.

mutations: {
  /**
  * A 'set'-wrapper to mutate vuex-store variable inside a mutation to avoid getting a error.
  * @param state
  * @param payload:
  *   object - object to be mutated
  *   prop - prop inside object that is affected
  *   value - value that should be assigned
  */
  setWrapper(state, payload) {
   let { object, prop, value } = payload

   object[prop] = value
  }
}

이전에 오류가 발생한 라인을 다음으로 변경하십시오.

commit('setWrapper', {
  object: payload,
  prop: 'permissions',
  value: permissionFromDb
})

행동은 국가를 변이시키지 않는다.
비동기 작업을 수행하는 작업이 있다.
동작 내에서 상태를 변경하려면 다음 구문을 사용하여 돌연변이에 의존해야 한다.commit('MUTATION_NAME', payload)

다음:

MUATATION_NAME(state, payload) {
  state.permissions = payload.permissions
}

이것이 가장 깨끗하고 올바른 방법이다.

참조URL: https://stackoverflow.com/questions/55704804/better-approach-handling-do-not-mutate-vuex-store-state-outside-mutation-handl