使用Vuex实现登陆成功后展示登录用户的信息

需求描述：

　　在登录页面登陆成功之后，在系统首页（或者首页右上角）展示登陆者信息，如图：

登陆逻辑：

1、...mapActions(['saveUserName'])：

　　相当于将 `this.saveUserName(username)` 映射为 `this.$store.dispatch('saveUserName', username)`

2、在登陆时把用户名存入vuex中

methods: {
    ...mapActions(['saveUserName']),
    login() {
      this.axios
        .post('/user/login', {
          username: this.username,
          password: this.password
        })
        .then(res => {
          console.log('res')
          console.log(res)
          this.$cookie.set('userId', res.id, { expires: 7 })
          this.$router.push('/#/index')
        })
    }
  }

综上已经可以在首页右上角展示登录人的username了，但是页面刷新之后就不能正常显示了。

所以可以在APP.vue里在存入一次：

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
export default {
  name: 'app',
  data() {
    return {}
  },
  mounted() {
    if (this.$cookie.get('userId')) {
      this.getUser()
      this.getCartCount()
    }
  },
  methods: {
    getUser() {
      this.axios.get('/user').then((res = {}) => {
        this.$store.dispatch('saveUserName', res.username)
      })
    },
    getCartCount() {
      this.axios.get('/carts/products/sum').then((res = {}) => {
        this.$store.dispatch('saveCartCount', res)
      })
    }
  }
}
</script>
<style lang="scss">
@import './assets/scss/reset.scss';
@import './assets/scss/config.scss';
@import './assets/scss/mixin.scss';
@import './assets/scss/button.scss';
@import './assets/scss/modal2.scss';
</style>

3、在NavHeader组件里取出state里的username, 但是一定要用computed，因为页面展示完了可能值还没有取到，就导致无法显示登录人的username

computed: {
        username() {
            return this.$store.state.username
        }
    },

<div class="topbar-user">
                    <a href="javascript:;" v-if="username">{{username}}</a>
                    <a href="javascript:;" v-if="!username" @click="login">登陆</a>
                    <a href="javascript:;">我的订单</a>
                    <a href="javascript:;" class="my-cart" @click="goToCart">
                        <span class="icon-cart"></span>
                        购物车
                    </a>
                </div>
            </div>