programing

Vuex의 동적 변경 값 감시

coolbiz 2022. 7. 4. 23:08
반응형

Vuex의 동적 변경 값 감시

이렇게 동적으로 채워지는 vuex 스토어가 있습니다.

state: {
    collector: {
        tableName: {
            columnName1 : 2,
            columnName2 : 'NO',
            columnName3 : '2019-03-23'
            ...
            ...
        }
    }
}

모든 컴포넌트가 테이블 이름과 컬럼 이름을 저장합니다.props컴포넌트에서는tableName그리고.columnName.

다음으로, 온체인지componentA(columnName1)의 가치componentB(columnName3)vuex 값이 변경됩니다.vuex의 값을 변경하기 위해 다음과 같은 작업을 수행합니다.

this.$store.commit('setCollector', { tableName : currTableName , value : currValue , columnName : currColumnName});

이제 vuex 값의 변경을 확인하고 vuex 값의 변경을componentB(columnName3)입력란

어떻게 하면 좋을까요?누가 안내 좀 해주시겠어요?

스토어 값을 감시하려면 다음과 같이 할 수 있습니다.

컴포넌트:

computed: {
    columnName1() {
      return this.$store.state.collector.tableName.columnName1;
    }
  },
  watch: {
    columnName1() {
      // do something when the value columnName1 changes
    }
  }

vuex watch를 사용할 수 있습니다.https://vuex.vuejs.org/api/ #watch

그러나 일반적으로 이러한 재계산을 수동으로 호출할 수 있도록 데이터 흐름을 설계할 수 있어야 합니다.감시자 및 유사한 메커니즘은 무한 루프 또는 데이터의 불일치 등과 같은 문제를 쉽게 야기할 수 있습니다.

언급URL : https://stackoverflow.com/questions/57259142/vuex-watch-for-dynamic-change-value

반응형