Vue - 安装前未及时计算数据

Question

我正在学习 Vue，但遇到了一个问题，即我的数据从计算方法返回未定义。似乎在安装组件时未计算数据，可能是由于获取请求 - 将我的 this.render() 包装在 setTimeout 中会正确返回数据。设置超时显然是不明智的，那么我应该如何做到这一点以获得最佳实践？

主页.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.js

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

Answer 1

这是因为在Vue调用mounted hook时，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();
       }
    }
}

附：并且不要使用 render 这个词作为方法名或其他东西，因为 Vue 实例有 render 函数，这可能会有点混乱。