有一個(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