Vue - 마운트 전 시간에 데이터가 계산되지 않음

Vue - 마운트 전 시간에 데이터가 계산되지 않음

Vue를 배우고 있는데 계산된 메서드에서 정의되지 않은 데이터가 반환되는 문제가 발생했습니다.데이터가 컴포넌트를 마운트할 때까지 계산되지 않는 것 같습니다.아마 get request - raping my.this.render()에 있어서setTimeout는 데이터를 올바르게 반환합니다.타임아웃을 설정하는 것은 분명 현명하지 않습니다.베스트 프랙티스를 위해서 어떻게 하면 좋을까요?

Home.vue

export default {
    created() {
        this.$store.dispatch('retrievePost')
    },
    computed: {
        posts() {
            return this.$store.getters.getPosts
        }
    },
    methods: {
        render() {
            console.log(this.comments)
        }
    },
    mounted() {
        setTimeout(() => {
            this.render()
        }, 2000);
    },
}

store.displaces를 설정합니다.

export const store = new Vuex.Store({
    state: {
        posts: []
    },
    getters: {
        getPosts (state) {
            return state.posts
        }
    },
    mutations: {
        retrievePosts (state, comments) {
            state.posts = posts
        }
    },
    actions: {
        retrievePosts (context) {
            axios.defaults.headers.common['Authorization'] = 'Bearer ' + context.state.token

            axios.get('/posts')
                .then(response => {
                    context.commit('retrievePosts', response.data)
                })
                .catch(error => {
                    console.log(error)
                })
        }
    }
})

이는 Vue가 마운트된 후크를 호출할 때 Axios 요청이 아직 처리 중이기 때문입니다(이러한 동작은 서로 독립적입니다).state.posts예상대로 정의되지 않았습니다.

게시물을 로드했을 때 작업을 수행하려는 경우 사용watch혹은 그 이상computed가능한 경우:

export default {
    created() {
        this.$store.dispatch('retrievePost')
    },
    computed: {
        posts() {
            return this.$store.getters.getPosts
        }
    },
    methods: {
        render() {
            console.log(this.comments)
        }
    },
    watch: {
       posts() { // or comments I dont see comments definition in vue object
           this.render();
       }
    }
}

추신. 그리고 사용하지 마세요.renderVue 인스턴스가 다음을 가지고 있기 때문에 메서드 이름 또는 기타로 단어를 사용합니다.render조금 혼란스러울 수 있습니다.

언급URL : https://stackoverflow.com/questions/51570736/vue-data-not-computed-in-time-before-mount