vue에서 vuex의 데이터 변경 사항을 모니터링하는 방법

vue가 vuex에서 데이터 변경을 모니터링하는 방법: 먼저 계산된 속성을 통해 vuex에서 데이터를 얻은 다음 watch를 사용하여 계산된 속성 값의 변경 사항을 모니터링하고 데이터 변경 전후의 값을 얻을 수 있습니다. 그에 따라 처리하십시오.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

1. vue 파일에서 vuex의 데이터 변경 사항을 모니터링합니다.

먼저 계산된 속성을 통해 vuex의 데이터를 가져옵니다.
그런 다음 watch를 사용하여 계산된 속성의 값을 모니터링하여 변경 사항을 가져옵니다.

<script>
import { mapGetters } from &#39;vuex&#39;
export default {
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters(["mapboxMap"]),
    mapboxMap1() {
      // return this.$store.state.mapbox.map;
      return this.mapboxMap;
    }
  },
  watch: {
    mapboxMap1(newData, oldData) {
     
    }
  },
}
</script>

2. Vue는 어떻게 작동하나요? Vue가 아닌 파일의 Vuex 데이터 변경 사항을 모니터링하나요?

보통 우리는 vue 파일의 데이터 변경 사항, 특히 vuex의 데이터 변경 사항을 모니터링하여 데이터 변경 전후의 값을 가져와 그에 따라 처리하는 것이 매우 편리합니다.

그러나 js와 같은 파일의 데이터 변경을 모니터링해야 할 때는 쉽지 않습니다. 다행히 vue 공식 홈페이지에서 솔루션을 제공합니다.

watch(fn: Function, callback: Function, options?: Object): 인스턴스 메소드 of Function
vuex는 두 개의 매개변수를 받습니다.
첫 번째 매개변수는 fn이고 응답적으로 fn의 반환 값을 수신하며 값이 변경되면 콜백 함수를 호출합니다. fn은 저장소의 상태를 첫 번째 매개변수로 받고 getter를 두 번째 매개변수로 받습니다.
두 번째 매개변수는 Vue 시계의 콜백 함수와 유사하며 이전 값과 새 값을 나타내는 선택적 개체 매개변수 표현입니다.
듣고 싶지 않은 경우 이 메서드의 반환 값 함수를 받을 변수를 정의하고 이 함수를 호출하여 모니터링을 중지할 수 있습니다.

장점: 필요한 특정 값을 모니터링할 수 있고, vue 파일처럼 매우 편리하게 이전 값과 새 값을 얻을 수 있습니다.
단점: 많은 값의 변화를 알아야 할 때 많은 양의 값을 작성해야 합니다. 모니터링 방법 (메서드나 클래스로 캡슐화하는 것을 고려할 수 있습니다)
사용예:

/* eslint-disable */
import store from "../store/index";

const watchFun = store.watch(
    state => state.pathName,
    (newValue, oldValue) => {
        console.log("search string is changing");
        console.log("rd: newValue", newValue);
        console.log("rd: oldValue", oldValue);
    }
);

setTimeout(() => {
    watchFun();
}, 10000);

• 해당 js 파일에 스토어를 소개합니다

• 스토어의 watch 인스턴스 메서드를 호출하면 첫 번째 함수 매개변수가 반환됩니다. 모니터링해야 하는 상태의 값 (예를 들어 vuex에서 pathName의 변경을 모니터링하려는 경우 이 값을 반환합니다.)

• 두 번째 매개 변수는 vue의 watch와 동일하며 이를 나타내는 2개의 매개 변수를 받습니다. 이전 값과 새 값 ​​

• watchFun 변수를 통해 시계의 반환 값을 받습니다. 이 메서드를 호출하면 모니터링이 중지됩니다.

위는 다음과 같은 vue가 아닌 파일에서 vuex 데이터의 변경 사항을 모니터링하는 방법입니다. js.js.

기사에서 언급했듯이 데이터 양이 너무 많으면 여러 모니터를 작성하는 것이 비우호적입니다. 많은 양의 데이터를 관리하려면 돌연변이 구독을 고려해 볼 수 있습니다.

관련 추천: "vue.js Tutorial"

위 내용은 vue에서 vuex의 데이터 변경 사항을 모니터링하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!