有一个 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
