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

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

<template>
<container id="app">
    <headerBar></headerBar>
    <Main></Main>
    <footerBar></footerBar>
</container>
</template>

<script>
import headerBar from '@/components/headerBar'
import fooerBar from '@/components/footerBar'
import Main from '@/components/index'

export default {
  components: {
        headerBar,
        Main,
        footerBar
  }
}
</script>

一般情况下, headerBar 中会包含登录用户的信息, 假设我们使用 Vuex 来管理数据,如果我们在 <Main></Main> 组件中注销用户时,此时在 Main 组件中的 user 值已被注销,但是 headerBar 组件中的 user 值还存在,并未自动更新, 这样会造成组件间状态不同步的问题.

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

<template>
  <div v-if="session == null ">
          <router-link :to="{ name: 'Login', params: {} }">登录</router-link>
</div>
<div v-else>
        欢迎: {{ user.username }}
</div>
</template>

import store from '@/store'

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