Vue 父子组件数据不同步的解决方案

有一个 layout.vue,是网站的布局文件,包含 header.vue , main.vue和 footer.vue, 文件代码如下:

一般情况下, headerBar 中会包含登录用户的信息, 假设我们使用 Vuex 来管理数据,如果我们在

组件中注销用户时,此时在 Main 组件中的 user 值已被注销,但是 headerBar 组件中的 user 值还存在,并未自动更新, 这样会造成组件间状态不同步的问题.

解决方式是在 headerBar 中用 computed 注册属性, 而不是在 data() 中注册.
上代码:

import store from '@/store'

export default {
    name: 'headerBar',
    computed: {
        user() {
            return this.$store.state.user
        },
        session() {
            return this.$store.state.session
        }
    },
    store