慕课从零开发电商总结

1： vuex的基本使用
基本使用

state:{
count： 0
}

mutions:{
getCount (state, count) {
state.count = count
}
}

调用

this.$store.commit('getCount', 1)

使用

this.$store.state.count

辅助性函数的使用

mapState  mapAction
import { mapState, mapMutations } from 'vuex'

computed: mapState(['count'])
相当于： 
computed: {
count () {
return this.$store.state.count
}
}

methods:{
 ...mapMutations({
      getCountFunc: 'getCount'
    }),
    this.getCountFunc(1)
    }
    相当于
    this.$store.commit('getCount', 1)

2: 鼠标移入动画

// 公共logo
.header-logo{
  display:inline-block;
  width:55px;
  height:55px;
  background-color:#FF6600;
  a{
    display:inline-block;
    width:110px;
    height:55px;
    &:before{
      content:' ';
      @include bgImg(55px,55px,'/imgs/mi-logo.png',55px);
      transition:margin .2s;
    }
    &:after{
      content:' ';
      @include bgImg(55px,55px,'/imgs/mi-home.png',55px);
    }
    &:hover:before{
      margin-left:-55px;
      transition:margin .2s;
    }
  }

4：混入 mixin.scss

//flex布局复用
@mixin flex($hov:space-between,$col:center){
  display:flex;
  justify-content:$hov;
  align-items:$col;
}

引入

@import './../assets/scss/mixin.scss';

使用

 @include flex();

5: 鼠标移入 影藏 淡出

 &:hover{
              color:$colorA;
              .children{
                height:220px;
                opacity:1;
              }
            }

 .children{
              position:absolute;
              top:112px;
              left:0;
              width:1226px;
              height:0;
              opacity:0;
              overflow:hidden;
              border-top:1px solid #E5E5E5;
              box-shadow:0px 7px 6px 0px rgba(0, 0, 0, 0.11);
              z-index: 10;
              transition:all .5s;
              background-color: #ffffff;
              }
              .container{
  position: relative;
  width:1226px;
  margin-right:auto;
  margin-left:auto;
}

6：数据截取

if (res.list.length > = 6) {
this.list = res.list.slice(0, 6)
}

7：轮播
8: 铺满

position: absolute
left: 0
top:0
width:100%
height: 100%

transition:transform .3s
&:hover {
transform:scle(1.5)
}
object-fit: cover


.slide {
  position: fixed;
  top: -50%;
  opacity: 0;
  transition: top 0.6s, opacity 0.3s;
  .slideClick {
    top: 50%;
    opacity: 1;
  }

@keyframes down {
  from{
    top: -50%;
    opacity: 0;
  } 
  to {
    top: 50%;
    opacity: 1;
  }
}
.slide {
  position: fixed;
  top: -50%;
  opacity: 0;
  // transition: top 0.6s, opacity 0.3s;
  animation: down .3s linear ;
  top: 50%;

this.slide = down
this.slide = ''

9: 不传参 传事件

@click="$emit('submit')"
@submit=""

10: 路由跳转

this.$router.push('/a/a')
this.$route.params.id

11: 图片赖加载
vue-lazyload
12: get post

get
 params:{
}

post: {

}

13: 对于参数的结构

let {user, password}  =this

14: 对axios的状态,做路由跳转

 window.location.href = '/'

15:安全区域

position: relative;
    width: 1226px;
    margin-right: auto;
    margin-left: auto;

16：吸顶

mounted() {
    window.addEventListener("scroll", this.initHeight);
  },
  methods: {
    initHeight() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.isFixed = scrollTop > 152 ? true : false;
    },
  },
  destroyed() {
    window.removeEventListener('scroll', this.initHeight, false) // 冒泡
  },

    <nav-footer :class="{ 'is-fixed': isFixed }"></nav-footer>
  
    .is-fixed {
  position: fixed;  // 浏览器窗口
  top: 0;
  width: 100%;
}

17:变量初始化辅助
const { data=2 } =
18: tab切换

 <nav-footer :class="{'check': version === 1}" @click="version = 1"></nav-footer>
    <nav-footer :class="{'check': version === 2}" @click="version = 2"></nav-footer>

19：插槽

<slot name="tip "></slot>

<template v-slot:tip>
<span>插槽</span>	
</template>

20： 滚到到底部分页

vue-infinite-scroll

21: loading 和暂无数据
不需要if else 直接就是if判断nodata，因为nodata是最后一步没办法才要显示

数据加载的时候，要出现loading.数据加载完毕，但是没有数据，出现无数据页面

noData初始化为true.
无数据页面判断条件为 v-if="!noData && list.length === 0"

请求回数据以后

if (!this.list) {
 this.noData = false
}

22: 对参数的结构

先来看看我写的

 wx.getSystemInfo({
      success: (res) => {
        console.log(res); // 根据 屏幕高度 进行判断
        if (res.screenHeight - res.safeArea.height > 40) {
          console.log("是全面屏");
          this.globalData.isFullSucreen = true;
          console.log(this.globalData.isFullSucreen);
        }
      },
    });

看看别人写的

 const { safeArea, screenHeight } = wx.getSystemInfoSync()
      this.fullScreen = screenHeight - safeArea.height > 40

简明扼要之处，

1. 通过结构赋值，将需要的参数结构出来
2. 没有直接赋值true 或者false, 而是通过 一个表达式计算的结果。来判断是true or false
   22 : 百名单设置

const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist