돌연변이의 페이로드 인수만 사용하여 Vuex 상태를 수정해도 되는가?

돌연변이의 페이로드 인수만 사용하여 Vuex 상태를 수정해도 되는가?

예를 들어 Vue 파일의 Vuex 데이터를 반복하고 업데이트가 필요한 데이터를 선택한 다음 발견된 데이터를 작업에 전달하여 해당 작업을 커밋하고 돌연변이가 업데이트만 할 수 있는가?

내가 그것에 대해 확신이 서지 않는 이유는 전형적인 형태의 Vuex 돌연변이가 '상태'에 대한 파라미터를 포함하고 있기 때문에, 나는 그것을 사용할 필요가 있다고 생각하는데, 그렇게 하는 유일한 방법은 돌연변이 내부의 모든 루프를 하는 것이거나, 혹은 변화가 필요한 정확한 분야를 더 빨리 찾기 위해 그것에 색인을 전달하는 것이다.

누가 물어봤는지 코드 예시:

someVueFile.부에를 하다

computed: {
    ...mapState({
      arrayOfObjects: (state) => state.someVuexStore.arrayOfObjects
    }),
},
methods: {
    myUpdateMethod() {
        let toBePassedForUpdate = null;
        let newFieldState = "oneValue";
        this.arrayOfObjects.forEach((myObject) => {
            if (myObject.someDataField !== "oneValue") {
               toBePassedForUpdate = myObject.someDataField;     
            }
        })

         if (toBePassedForUpdate) {
             let passObject = {
                 updateThis: toBePassedForUpdate,
                 newFieldState: newFieldState
             }

             this.$store.dispatch("updateMyObjectField", passObject)
         }
    }
}

someVuexStore.js

const state = {
  arrayOfObjects: [],
  /* contains some object such as:
    myCoolObject: {
      someDataField: "otherValue"
    }
  */
}

const mutations = {
  updateMyObjectField(state, data) {
    data.updateThis = data.newFieldState;
  }
}

const actions = {
  updateMyObjectField(state, data) {
    state.commit("updateMyObjectField", data);
  }
}

그래, 페이로드 인수를 통해 전달된 상태를 변이하는 것이 아니라 변이해도 괜찮아.state.Vuex는 굳이 둘을 구별하지 않는다.두 경우 모두 동일한 상태여서 어떤 옵션도 돌연변이를 사용하는 목적을 방해하지 않는다.

그것을 좀 더 확신하기 위해서, 당신은 돌연변이의 목적이 무엇인지, 그리고 그들의 사용을 강제하는 것에 대해 물어볼 수 있다.답은 구체적으로 정의된 상태 변경을 위해 중앙집중적이고 추적 가능한 위치를 유지하는 것이다.

이것을 설명하기 위해, 1000개의 구성요소를 가진 앱을 상상해 보십시오. 각 구성요소가 로컬에서, 돌연변이 외부에서, 그리고 다른 방식으로 상태를 변화시킨다고.이것은 제3자로 디버깅하거나 이해하는 악몽이 될 수 있다. 왜냐하면 당신은 어떻게, 어디서 어떻게 국가가 변하는지 모르기 때문이다.

그래서 돌연변이는 어떻게 그리고 어디에서 중앙집권적으로 작용한다.이들 중 어느 것도 돌연변이에 페이로드 인수만 사용해도 손상되지 않는다.

나는 모든 논리들을 한 동작에서 할 것이다. 당신은 그렇게 행동 서명에 컨텍스트 객체를 구성 할 수 있다.

actions: {
  myAction ({ state, commit, getters, dispacth } ,anyOtherParameter) {
    let myVar = getters.myGetter//use a getter to get your data
    //execute logic
    commit('myCommit', myVar)//commit the change
  }
}

만약 당신이 당신의 구성 요소에서 논리를 실행해야 한다면 당신은 행동에서 쉽게 게터와 논리를 추출할 수 있다.

참조URL: https://stackoverflow.com/questions/64944440/is-it-ok-to-modify-vuex-state-using-only-the-payload-argument-of-a-mutation