汇总(复习)

1.过滤器filter跟reduce结合使用(过滤出选中的,再相加,记得prevalue)

computed: {
    totalPrice() {
      return '¥' + this.$store.state.cartList.filter(item => {
        return item.checked
      }).reduce((preValue, item) => {
        return preValue + item.price * item.count
      }, 0)
    }
  }

2. toFixed(2) 保留两位小数

3. vuex 中引入 mapGetters

import { mapGetters} from ‘vuex’

//使用getters里面封装的cartList
computed: {
    ...mapGetters(['cartList'])
  },

4.forEach 遍历数组

methods: {
    checkClick() {
      if(this.isSelectAll) {
        this.cartList.forEach(item => item.checked = false)
      }else{
        this.cartList.forEach(item => item.checked = true)
      }
    }
  }

5.数组的监听点击 @click.native

6.加入购物车弹窗的实现.用Promise对actions里addCart包一下,再通过promise的resolve回调

addCart(context, payload) {
    return new Promise((resolve, reject) => {
      //payload 新添加商品
    // let oldProduct = null 
    // for(let item of state.cartList) {
    //   if(item.iid === payload.iid) {
    //     oldProduct = item
    //   }
    // }
    //1.查找是否含有该商品(item为之前定义的payload)
    let oldProduct = context.state.cartList.find(item => item.iid === payload.iid)

    //2.判断oldProduct
    if(oldProduct) {
      // oldProduct.count +=1
      context.commit(ADD_COUNTER, oldProduct)
      resolve('数量加一')
    }else{
      payload.count = 1
      // this.state.cartList.push(payload)
      context.commit(ADD_CART_GOODS, payload)
      resolve('添加新的商品')
    }
    })
  }

7.mapActions 映射(可以通过两种方法)

import {mapActions} from 'vuex'  //引入

methods: {
//1数组
    ...mapActions(['addCart'])
//2对象,改名字
...mapActions({
    add: 'addCart'
)
}

8.vue.use(xxx)   执行install的同时,还把vue传过来,不用再导入

//安装toast插件
Vue.use(toast) //use相当于执行toast的install函数

 9.$el $el用于获取Vue实例挂载的DOM元素，在mounted生命周期中才有效，之前的钩子函数内无效。如下代码所示，Vue脚手架中，$el指向当前组件template模板中的根标签。

<template>
  <div id="root">
    <h1 @click="fn()">
      Lorem, ipsum
    </h1>
  </div>
</template>
<script>
export default {
  mounted () {
    // this.$el只在mounted中才有效
    console.log('this:', this) // 打印this指向组件实例。
    console.log('this.$el:', this.$el) // 打印这个vue组件的dom对象
    this.$el.style.color = 'red'
  },
  methods: {
    fn () {
      console.log('test_this.$el:', this.$el) // <div id="root">...</div>
    }
  }
}
</script>

————————————————
版权声明：本文为CSDN博主「No Silver Bullet」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sunhuaqiang1/article/details/112987858

 10.Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

11.全选按钮的逻辑问题

isSelectAll() {
      if(this.cartList.length ===0) {return false}
      //不选中的数组的长度,返回的是一个数值,取反就是false(0的话取反是true)
      //return !(this.cartList.filter(item => !item.checked).length)


      // return !this.cartList.find(item => !item.checked)
      for(let item of this.cartList) {
        if(!item.checked){//item.checked 为false 不选中,取反为true执行if,returnfalse
          return false
        }
      }
      return true
    }

 12.加入购物车弹窗的toast封装

import Toast from './Toast'
const obj = {
  
}
obj.install = function(Vue) {
  //console.log('执行了')
  // console.log(Toast.$el)  undefined 执行install时候还没被挂载
  // document.body.appendChild(Toast.$el)

  // 1.创建组件构造器/
  const toastContructor = Vue.extend(Toast)

  //2.new 创建一个新的组件对象
  const toast = new toastContructor()

  //3.将组件对象手动挂载到一个元素上
  toast.$mount(document.createElement('div'))

  //4.$el 就是div了
  document.body.appendChild(toast.$el)

  Vue.prototype.$toast = toast
}

export default obj

main.js安装

import toast from 'components/common/toast'
Vue.use(toast) //use相当于执行toast的install函数