本文探讨了在Vue.js应用中如何正确管理和更新状态，特别是在使用Vuex进行状态管理时，如何在路由切换时确保数据的正确加载。通过使用Vuex的actions和mutations，以及beforeRouteUpdate路由守卫，确保组件在数据加载完成后再进行渲染，避免呈现空数据。同时，介绍了如何通过getter来检查数据是否已加载，并在模板中根据数据状态展示内容。
首先，您的操作应执行任何状态突变，例如将 user.get_user 设置为 null . 我添加了一块 Watch ;您的操作应该只在完成时解决 . 例如
actions: {
[OTHER_PROFILE_GET] ({ commit }, id) {
commit('clearUserGetUser') // sets state.user.get_user to null or something
return axios.get(`/some/other/profile/${encodeURIComponent(id)}`).then(res => {
commit('setSomeStateData', res.data) // mutate whatever needs to be set
})
}
}
然后你的护卫队应该有类似的东西
beforeRouteUpdate (to, from, next) {
this.$store.dispatch(OTHER_PROFILE_GET, to.params.id).then(next)
}
为了防止错误尝试呈现 null 数据，请使用您的getter . 例如，说你的吸气剂是
getters: {
is_user_loaded (state) {
return !!state.user.get_user
}
}
在您的组件中，您可以将其映射到计算属性...
computed: {
isUserLoaded () {
return this.$store.getters.is_user_loaded // or use the mapGetters helper
},
user () {
return this.$store.state.user.get_user // or use the mapState helper
}
}
然后在您的模板中，使用此逻辑有条件地呈现一些数据
Hello {{user}}
Loading...
5078
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
