问题:
因为用户数据肯定不止一点,如果通过this.state.userInfo方法读取vuex中被管理数据,那么假如用户数据有昵称,邮件,头像等,就得一个一个 . 出来太费劲了!!
解决:通过store中的getters节点
在src/store/index.js
export default new Vuex.Store({
state: {
// 定义用户信息对象
userInfo: {}
},
getters: {
// username(state){
// return state.userInfo.username
// }
// 简写:
username: state => state.userInfo.username,
nickname: state => state.userInfo.nickname,
user_pic: state => state.userInfo.user_pic
}
}
在组件的script下:
import { mapGetters } from 'vuex'
export default {
name: 'my-layout',
computed: {
...mapGetters(['username', 'nickname', 'user_pic'])
}
}
组件的html结构中:
<!-- 侧边栏-用户信息 -->
<div class="user-box">
<img :src="user_pic" alt="" v-if="user_pic" />
<img src="@/assets/images/logo (1).png" alt="" v-else />
<span>欢迎 {{ nickname|| username }}</span>
</div>