돌연변이를 사용하지 않고 Vuex 상태를 직접 변환합니다.

돌연변이를 사용하지 않고 Vuex 상태를 직접 변환합니다.

react/redux로로 합니다.vue vuex상태를 직접 변환할 수 있으며 상태 변경은 상태를 사용하는 다른 컴포넌트에 반영됩니다.

은 에서는 되어 있습니다.Redux상태를 직접 변환하면 다른 컴포넌트에 변경 내용이 통지되지 않으므로 액션과 리듀서를 사용해야 합니다.

모든 방법은 기본적으로 동일한 결과를 제공합니다.

methods: {
    IncrementDirect () {
      // mutates the state directly
      this.$store.state.counter += 2;
    },
    incrementDispatch() {
      // mutates the state inside actions
      this.$store.dispatch("handleIncrement", 2);
    },
    incrementCommit() {
      // mutates the state inside mutations
      this.$store.commit("increment", 2);
    },
  },

는 왜 이 되는지, 왜 는 '''를 사용해야 '' '''를 사용해야 .mutations말 그대로 앱의 어느 곳에서나 상태를 바꿀 수 있다면요.

Redux와 Vuex의 차이점은 상태를 변경해도 새로운 상태가 생성되지 않는다는 것입니다.Vue는 불변인 척 하지만 성능을 위해 실제로 상태를 변형시키고 반응 채널을 통해 돌연변이를 추적합니다.이것은 훌륭한 속임수이지만, 당신이 발견했듯이, 약간의 부작용이 있다.

컴포넌트나 동작에서 직접 상태를 변경하는 경우 공식 돌연변이 채널을 사용하지 않습니다.이렇게 동작하는 코드를 디버깅했지만 나중에 버그를 발견했습니다.반응성이 전혀 작용하지 않고 업데이트가 이루어지지 않았기 때문입니다.

또한 Vue dev 툴을 통해 Vuex를 디버깅하면 돌연변이를 사용하지 않는 한 상태 변화가 나타나지 않습니다.또한 Vuex 플러그인이 있는 경우 변환이 없는 한 플러그인은 실행되지 않습니다.

이 모든 기술적 이유들, 다소 모호해 보일지 모르지만, 저는 이것이 국가 변화를 위한 유동적인 틀의 방식이 아니라는 것을 지적할 필요성을 느낍니다.리액트에서는 상태 변경이 큰 원을 그리며 일어나야 한다는 것을 알고 있습니다.Redux에서는 컴포넌트가 새로운 상태를 반환하기 위해 리덕터를 호출하고 이를 적용한 후 어플리케이션을 다시 렌더링하여 컴포넌트에서 다른 변경을 위한 준비를 합니다.이 프레임워크는 UI를 상태로부터 분리하여 모든 상태 변경이 한 곳에서 이루어지도록 명령합니다.Vuex 돌연변이도 마찬가지입니다.모든 상태 변화가 일어나야 합니다.

이를 현재 상태(pun un additioned)로 되돌리면 Vue 3에서 매우 흥미로운 작업을 수행할 수 있습니다.그 중 하나는 Vue 컴포넌트 외부에서 반응형 개체를 만들고 해당 개체를 글로벌 상태로 컴포넌트에 Import하여 원하는 대로 변환할 수 있다는 것입니다.Vue 3은 이러한 돌연변이를 애플리케이션 전체와 동기화할 수 있도록 하며, 일부 계획을 세우면 매우 뛰어난 Vuex 대체 기능을 제공할 수 있습니다.

그 직후에 다음 Vuex는 별개의 돌연변이라는 개념을 버리고 액션이나 다른 것을 통해 모든 상태를 직접 바꿀 수 있을 것으로 보인다.모듈 구성에 대한 Vue의 생각과 함께 위와 같은 Vue 3 반응 시스템을 사용하여 매우 간단한 프레임워크를 구축할 수 있을 것입니다.

이 모든 것을 말하자면, 당신의 직관은 앞으로 나아갈 방향에 대해서는 맞지만, 오늘로서는 시기상조일지도 모릅니다.

동작은 변화하고 반응성은 여전히 사용 돌연변이를 필요로 하지 않고 작동할 수 있다고 생각합니다.

하지만 나는 명확한 증거를 찾을 수 없었다.

리액티브와 프록시 오브젝트(Vuex4/Vue3가 이용하는 것)가 최근 도입되었기 때문에 핸들러 세터 함수 내에 "commit" 코드를 두는 것은 비교적 간단한 작업처럼 들립니다.결국 그렇게 되었다고 생각합니다만, 제가 발견한 설명에 가장 가까운 것은 피니아입니다.

Vue2/Vuex3에서는 상태를 직접 업데이트하지 못했을 것입니다.

돌연변이가 없는 경우 동작은 비동기적입니다.

export default new Vuex.Store({
  state: {
    // put variables and collections here
  },
  mutations: {
    // put synchronous functions for changing state e.g. add, edit, delete
  },
  actions: {
    // put asynchronous functions that can call one or more mutation functions
  }
})

돌연변이를 직접 커밋하지 않는 것을 습관화한다.항상 동작을 사용하여 돌연변이를 커밋

관련 질문:Vuex 작업 vs 돌연변이, Vuex에서 작업을 사용하지 않고 돌연변이를 커밋하는 것은 나쁜가? Vuex 작업 내에서 직접 상태를 조작하는 것과 'commit' 및 'getters'를 사용하는 것

언급URL : https://stackoverflow.com/questions/68170766/mutate-vuex-state-directly-without-using-mutations