Question

我正在学习Vue，但遇到一个问题，我的数据从计算方法返回未定义。似乎在组件安装时尚未计算数据，可能是由于get请求所致-将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.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调用已挂接的钩子时（这些动作彼此独立），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();
       }
    }
}

P.S。并且不要使用render字作为方法名称或其他名称，因为Vue实例具有render功能，并且可能会造成混淆。

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

1 个答案: