1、HeaderSearch.vue

<template>
    <div class="headerSearch">
        <input type="search" v-model.trim="keyword">
        <button @click="search">搜索</button>
    </div>
</template>

<script>
export default {
    name: 'HeaderSearch',
    data() {
        return {
            keyword: ''
        };
    },
    methods: {
        search() {
            if(this.keyword !=this.$route.query.wd)
              this.$route.push({path: '/search', query: {wd: this.keyword}})
        }
    },
}

2、HeaderCart.vue

<template>
  <div class="headerCart">
    <a href="javascript:;" @click.prevent="handleCart">
      <span>购物车 {{ cartItemsCount }} </span>
    </a>
  </div>
</template>

<script>
import { mapGetters } from '@vuex'

export default({
  name: 'HeaderCart',
  components: {
  },
  computed: {
    ...mapGetters('cart', {
      cartItemsCount: 'itemsCount'
    })
  },
  methods: {
    handleCart() {
      this.$router.push("/cart")
    }
  }
})
</script>

3、Header

<template>
  <div class="header">
    <img src="@/assets/images/logo.png">
    <HeaderSearch />
    <HeaderCart/>
    <span v-if="!user">你好，请<router-link to="/login">登录</router-link>  免费<router-link to="/register">注册</router-link></span>
    <span v-else>欢迎您，{{ user.username }}，<a href="javascript:;" @click="logout">退出登录</a></span>
  </div>
</template>

<script>
import HeaderSearch from "./HeaderSearch";
import HeaderCart from "./HeaderCart";
import { mapState, mapMutations } from 'vuex'

export default {
  name: "Header",

  components: {
    HeaderSearch,
    HeaderCart
  },

  computed: {
    // user模块带有命名空间
    ...mapState('user', [
      // 将this.user 映射为 this.$store.state.user.user
      'user'
    ])
  },

  methods: {
    logout(){
      this.deleteUser();
    },
    // user模块带有命名空间
    ...mapMutations('user', [
      // 将this.deleteUser 映射为 this.$store.commit('user/deleteUser')
      'deleteUser'
    ])
  },
};
</script>
<style scoped>
.header {
    width: 100%;
    /*position: relative;*/
}
.header img{
    width: 200px;
    height: 60px;
    margin: auto;  
}
.header span{
  margin-left: 20px;
}
.header a{
  text-decoration: none;
  color: red;

}
</style>