반응형
Vuex getter가 비동기 작업과 함께 null을 반환하고 있습니다.
저희 가게의 코드는 다음과 같습니다.
export default {
state:{
},
actions : {
loadData ({commit}){
const response = await axios.request({url:'http://mydata.com/data',method:'get'});
commit('setData', response.data);
console.log("Value set", response.data);
}
},
mutations: {
setData(state,data){
state.names = data.names;
state.values = data.values;
}
},
getters: {
getNames() {
return state.names() ;
},
getValues() {
return state.values();
}
}
}
부모 컴포넌트에는 다음이 있습니다.
<template>
<div>
<child-element :values="getValues"></child-element>
</div>
</template>
<script>
import {mapGetters,mapActions}
export default {
computed: {
...mapGetters(['getValues'])
},
created(){
loadData();
console.log(getValues);
}
}
</script>
내 자식 구성 요소:
<template>
<div>
<h1> {{ values["ma"] }}
</div>
</template>
<script>
export default {
props:{
values
}
mounted(){
console.log(this.values);
}
}
</script>
문제는 자녀 컴포넌트의 this.values가 항상 정의되지 않은 상태로 표시되고 자녀 컴포넌트의 메시지 뒤에 액션에서 설정된 메시지 값이 기록된다는 것입니다.getValues는 부모 컴포넌트에서 정의되지 않고 값 프로펠은 자녀 컴포넌트에서 정의되지 않았습니다.
작성 후 부모 마운트이벤트가 발생한다고 해서 정의되어서는 안 됩니다.또한 getter에서 사용되는 데이터는 자녀가 마운트될 때까지 값이 설정되어 있기 때문에 create는 정의되어서는 안 됩니다.
데이터를 올바르게 가져오고 사용하려면 무엇이 부족합니까?
Vuex에서 실행되도록 비동기 작업을 기다릴 수 없습니다.
created(){
loadData();
console.log(getValues);
}
다음과 같이 됩니다.
async created() {
await this.loadData()
console.log(getValues)
}
작업 완료 시 다음 약속도 반환해야 합니다.
actions : {
async loadData ({commit}){
const response = await axios.request({url:'http://mydata.com/data',method:'get'});
commit('setData', response.data);
console.log("Value set", response.data);
return Promise.resolve()
}
}
- 다음 상태에서 이름과 값을 선언해야 합니다.
state:{
names: null, // or [] if you wish to always have an array
values: null // or [] if you wish to always have an array
},
- 다음과 같이 게터를 수정합니다.
getters: {
getNames: state => state.names,
getValues: state => state.values
}
- 컴포넌트에서 loadData를 호출할 때 wait 키워드를 추가해야 합니다(및 메서드에 비동기 추가).
언급URL : https://stackoverflow.com/questions/60608770/vuex-getters-are-returning-null-with-asynchronous-actions
반응형
'programing' 카테고리의 다른 글
Vue - 마운트 전 시간에 데이터가 계산되지 않음 (0) | 2022.07.18 |
---|---|
Nuxt Vuex 저장소에 알 수 없는 작업 유형 (0) | 2022.07.18 |
OutputStream을 InputStream으로 변환하는 방법 (0) | 2022.07.18 |
"mvn clean install"과 "mvn install"의 차이점은 무엇입니까? (0) | 2022.07.17 |
Vuex 모듈 초기화 모범 사례 (0) | 2022.07.17 |