반응형
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
반응형
'programing' 카테고리의 다른 글
@vue/cli(vue-cli) 프로젝트에서 농담 경고를 비활성화하시겠습니까? (0) | 2022.07.04 |
---|---|
포인터 또는 주소를 인쇄할 올바른 형식 지정자입니까? (0) | 2022.07.04 |
Vue.js 이거 봐.$el.getContext('2d')는 함수가 아닙니다. (0) | 2022.07.04 |
const를 사용하여 변수를 초기화하려고 할 때 "initializer element is not const" 오류가 발생함 (0) | 2022.07.04 |
Vuetify 콤보 상자 항목 템플릿이 vuex로 업데이트되지 않음 (0) | 2022.07.04 |