반응형
사전 객체의 Vue + Vuex 반응도
나는 상태를 관리하기 위해 Vue + Vuex를 사용하고 있다.
저장:
state: {
nodes: {}
},
actions: {
loadNodes ({ commit }, parameter) {
axios.get('http://URL' + '/nodes', {
params: {
name: parameter['name'],
type: parameter['type']
}
}).then((response) => {
commit('nodeActivity', { uid: parameter['uid'], res: response.data })
})
}
},
mutations: {
nodeActivity (state, data: {uid, res}) {
Vue.set(state.nodes, data.uid, data.res)
}
},
getters: {
getNodes: state => state.nodes
}
이건 아마 괜찮을거야, 인nodes
사전구조가 있다.{ id: data }
이제 후크가 달린 부품이 있다.
created () {
this.$store.dispatch('nodeActivity', { uid: this.$props.uid, name: this.$props.namepar, type: this.$props.typepar })
}
그래서 API 호출은 데이터를 받아서 비동기식으로 저장된다.그건 효과가 있다.하지만 난 좀 더 구체적으로 말해야겠어uid
비슷한 것this.$store.getters.getNodes[0]
그것은 효과가 없지만this.$store.getters.getNodes
잘 작동해서 반응성이좋다고 생각한다.Vue.set(..)
. 사용해도const tmp = this.$store.getters.getNodes
(tmp
전체 사전 포함) 및 다음tmp2 = tmp[0]
, tmp2는 반응성이 없다.난 이유를 모른다.나는 Vue부터 시작하는데 매장 디자인을 바꾸는 팁을 고마워.
글쎄, 나는 설계상의 해결책이 부족할 수도 있다는 것을 발견했다.나는 단지 가지고 있다.watcher
저장소에서 데이터를 로드하는 변수(예:const tmp = this.$store.getters.getNodes
. 언제tmp
변경 사항을 알리고 변수를 할당할 수 있음tmp2 = tmp[number]
행동거지가 반응하는 거군나는 이 해결책이 꽤 진부하다고 생각한다.
참조URL: https://stackoverflow.com/questions/50948535/vue-vuex-reactivity-of-dictionary-object
반응형
'IT이야기' 카테고리의 다른 글
nestjs 오류 처리 접근법(비즈니스 논리 오류 대 http 오류)이란 무엇인가? (0) | 2022.03.16 |
---|---|
Vuetify + Electron이 있는 고정 헤더 아래의 스크롤 막대 (0) | 2022.03.16 |
두 관측치의 첫 번째 값이 모두 방출된 후 Zip이 값을 방출하지 않음 (0) | 2022.03.16 |
switchMap: 여러 개의 요청이 트리거됨 (0) | 2022.03.16 |
각도 2 입력 유효성 검사를 수동으로 트리거하는 방법 (0) | 2022.03.16 |