vue.js - Vue - 挂载前未及时计算数据

Question

我正在学习 Vue，我遇到了一个问题，我的数据从计算方法返回未定义。似乎数据不是在安装组件时计算的，可能是由于 get 请求 - 将我的 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);
    },
}

商店.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 调用挂载钩子(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 功能，这可能有点令人困惑。