vuejs/vuex에서 계산되고 작성된 소품 순서

Question

vue 및 vuex로 계산되고 생성 된 소품을 조작하기위한 올바른 순서에 대해 몇 가지 질문이 있습니다.

는 다음 코드

<script> 
    import { mapGetters } from 'vuex' 

    export default { 
    data() { 
     return {} 
    }, 
    props: ['id'], 
    methods: { 
    }, 
    computed: { 
     ...mapGetters({ 
     semestre: 'semestre/show/item' 
     }), 
     titre: function() { 
     return this.semestre.nom 
     } 
    }, 
    created() { 
     this.$store.dispatch('semestre/show/retrieve', parseInt(this.id)) 
    } 
    } 
</script> 

을하지만 정의되지 않은 변수 "semestre"를 조작 역가 계산에 오류를 갖는다.

생성되기 전에 계산이 실행 된 것처럼 보입니다. 따라서 Created 대신 beforeCreate를 사용하려고하면 소품이 없기 때문에 작동하지 않습니다.

그래서 나는

생각

beforeCreate => 소품 => 계산 된 =>를 만든?

하지만 내 코드를 올바르게 실행하려면 어떻게해야합니까? 소품에서 가치를 얻고이 값을 vuex에 전달한 다음 VueX의 결과를 조작해야합니다. 어쩌면, 나는 vue/vueX의 논리에서 어떤 것을 이해하지 못할 수도 있습니다.

감사

데이비드

Answer 1

당신의 뷰에 사용되는 계산 된 경우, 예 그것은 당신의 vuex 조치가 비동기 것 같습니다부터 제공됩니다 semestre 전에 계산됩니다. 비동기식 인 경우 작업이 완료되기 전에 created 함수가 실행을 완료합니다. 이 때문에 getter 'semestre/show/item'은 작업이 완료 될 때까지 항상 정의되지 않은 값을 반환합니다. 이는 이 아니며이 아니기 때문에 created이 실행을 완료합니다.

이 문제를 처리하려면 비동기 적으로 값을 처리 할 수 ​​있도록 구성 요소를 작성해야합니다. 기본적으로 컴포넌트를 작성하여 아직로드되지 않은 케이스를 처리하고로드 된 케이스를 처리해야합니다. 나는 당신이 정의되지 않았거나 null 값을 처리 있도록 계산 변경 제안 :

이

titre: function() { 
    return this.semestre && this.semestre.nom; 
    //or if you want to provide a default value 
    return (this.semestre && this.semestre.nom) || '??'; 
} 

보다 강력한 솔루션을 사용하면 값이 작업이 완료되었는지의 여부를 추적하여로드하는 사용자에게 피드백을 제공 할 것입니다.

<template> 
    <div v-if="isLoading">Content is load (you could display a spinner)</div> 
    <div v-else> 
     Display your semestre content here: 
     {{titre}} 
    </div> 
</template> 
<script> 
    import { mapGetters } from 'vuex' 

    export default { 
    data() { 
     return { 
      isLoading: false, 
     }; 
    }, 
    props: ['id'], 
    computed: { 
     ...mapGetters({ 
     semestre: 'semestre/show/item' 
     }), 
     titre: function() { 
     return this.semestre.nom 
     } 
    }, 
    async created() { 
     this.isLoading = true; 
     await this.$store.dispatch('semestre/show/retrieve', parseInt(this.id)) 
     this.isLoading = false; 
    } 
    } 
</script> 

그리고 당신은 비동기를 사용할 수없는 경우/키워드를 기다리고, 당신은 다음을 수행 할 수

created() { 
    this.isLoading = true; 
    this.$store.dispatch('semestre/show/retrieve', parseInt(this.id)) 
     .then(() => { 
      this.isLoading = false; 
     }); 
} 

을