【Vue项目复习笔记】购物车导航栏的实现

购物车导航栏的实现

<template>
<div id="cart">
  <nav-bar class="cart-nav">
    <div slot="center">购物车</div>
  </nav-bar>
</div>
</template>

<script>
import NavBar from '@/components/common/navbar/NavBar';
export default {
  name: 'Cart',
  components:{
    NavBar
  }
};
</script>

<style scoped>
#cart {
  /*padding-top: 44px;*/
  height: 100vh;
  position: relative;
}

.cart-nav {
  background-color: var(--color-tint);
  color: #fff;

  /*position: fixed;*/
  /*left: 0;*/
  /*right: 0;*/
  /*top: 0;*/
  /*z-index: 9;*/
}

</style>

购物车里面有个小括号，用来存放购物车中衣服的数量，这里面的数字来自Vuex，因为我们要根据vuex里面的cartList里的数量来显示括号里的数量是多少。

 <div slot="center">购物车({{$store.state.cartList.length}})</div>

但是太长了，写起来不好看，我们可以加一个计算属性

 computed:{
    cartLength(){
      return this.$store.state.cartList.length
    }
  }

再将

<div slot="center">购物车({{cartLength}})</div>

如果拿cartLength的地方比较多的话，我们可以将其封装为一个getter.
在store文件夹中新建一个getters.js，导入到index.js。getters.js如下：

export default {
  cartLength(state){
    return state.cartList.length 
  },
  }

然后在我们的Cart.vue中cartLength修改如下

 computed:{
    cartLength(){
      return this.$store.getters.cartLength;
    }
  }

但是这样写也并没有减少多少代码，我们想直接把getters.js中的cartLength转成计算属性，直接在Cart.vue中使用。
在Cart.vue中导入

import {mapGetters} from 'vuex'

使用

 computed:{
 //方法一：
   ...mapGetters(['cartLength'])
  //方法2，将cartLength改成length
   // ...mapGetters({
   //   length:'cartLength'
    })
  }

其中mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性中。
最终结果如下：