programing

Vuex getter가 비동기 작업과 함께 null을 반환하고 있습니다.

goodsources 2022. 7. 18. 22:18
반응형

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()

  }
}
  1. 다음 상태에서 이름과 선언해야 합니다.
state:{
  names: null, // or [] if you wish to always have an array 
  values: null // or [] if you wish to always have an array  
},
  1. 다음과 같이 게터를 수정합니다.
getters: {
    getNames: state => state.names,
    getValues: state => state.values
}
  1. 컴포넌트에서 loadData를 호출할 때 wait 키워드를 추가해야 합니다(및 메서드에 비동기 추가).

언급URL : https://stackoverflow.com/questions/60608770/vuex-getters-are-returning-null-with-asynchronous-actions

반응형