使用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>