Vuex에서 값 변경이 관찰되지 않는 경우 해결 방법은 무엇입니까?

아래에서는 Vuex의 값 변화를 관찰할 수 없는 문제에 대한 솔루션을 공유하겠습니다. 이는 좋은 참조 값을 가지고 있으며 모든 사람에게 도움이 되기를 바랍니다.

메인 라우팅 뷰를 넘을 때 Vuex의 상태 값은 항상 메모리에 저장되기 때문에 컴포넌트 뷰를 다시 로드할 때 컴포넌트가 상태 값의 변화를 감지하지 못해 비즈니스에 오류가 발생할 수 있습니다. 논리.

일반 헤더 구성 요소에 전역 작업 상태 값이 있고 이 작업 값을 기반으로 다른 구성 요소를 업데이트해야 한다고 가정하면 작업 상태 값이 비동기적으로 로드되므로 비즈니스 로직을 다음과 같이 작성해야 합니다.

computed : {
 task () {
  return this.$store.state.task
 } 
},
watch : {
 task : {
   deep: true,
   handler (val) {
    // 由于是异步载入，所以只能在状态值的变化时执行渲染操作
    // 绝不可在mounted中执行render方法
    this.render(val)
   }
 } 
}

하지만 위의 이유로 인해 처음으로 뷰를 로드할 때 Vuex 상태 값이 메모리에 저장되지 않았기 때문에 렌더링이 정상입니다. 뷰 전환이 발생한 후 작업 상태 값이 다시 로드되더라도 작업이 변경되지 않았으므로 렌더링 메서드가 호출되지 않아 컴포넌트가 렌더링 프로세스를 완료할 수 없습니다.

해결 방법은 매우 간단합니다. 작업 값을 강제로 변경하려면 타임스탬프의 세분성이 여전히 너무 조악하다고 생각되면 다음과 같이 난수 조합을 사용할 수도 있습니다. :

watch: {
 taskId : {
   handler (val) {
    // 从v-model获取到的新值
    let taskId = this.taskId
    // 提交新值变化
    this.$store.commit(TASK_ID, 
    {
     id : taskId,
     // 添加时间戳
     time : Date.now().valueOf(),
     // 添加随机数
     random : Math.random()
    })
   }
 }
}

위 처리 후 taskId 할당이 발생하는 한 Vuex의 상태 변경이 트리거되므로 컴포넌트가 로드되거나 taskId 값이 변경될 때마다 render 메서드가 실행됩니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

js에서 document.write와 document.writeln의 차이점

Javascript에서 프로토타입과 __proto__ 사이의 관계에 대한 자세한 설명

Node.JS는 비어 있지 않은 폴더를 삭제하고 하위 디렉터리 모든 파일

위 내용은 Vuex에서 값 변경이 관찰되지 않는 경우 해결 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!