有一個(gè) layout.vue,是網(wǎng)站的布局文件,包含 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 中會(huì)包含登錄用戶(hù)的信息, 假設(shè)我們使用 Vuex 來(lái)管理數(shù)據(jù),如果我們?cè)?<Main></Main> 組件中注銷(xiāo)用戶(hù)時(shí),此時(shí)在 Main 組件中的 user 值已被注銷(xiāo),但是 headerBar 組件中的 user 值還存在,并未自動(dòng)更新, 這樣會(huì)造成組件間狀態(tài)不同步的問(wèn)題.

解決方式是在 headerBar 中用 computed 注冊(cè)屬性, 而不是在 data() 中注冊(cè).
上代碼:

<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