有赞商城总结

首页

1. ul列表触底加载更多数据
   使用外部UI库mint-ui，infinite-scroll无限滚动指令，实质就是滚动距底部一定距离，执行方法进行数据请求。
2. Foot组件的点击切换和跳转其他页面

• Foot组件底部导航图标.active切换
  遍历列表生成底部导航图标，通过location.search拿到查询参数，qs.parse( )解析得到CurIndex（默认初始值0），动态绑定class通过index==CurIndex判断是否激活active类。
• 点击跳转
  click后，把点击图标的index作为查询参数放到location.href上实现跳转。

methods: {
    changeNav(list, index) {
      location.href = `${list.href}?index=${index}`;
    }
}

列表页（search.html）

1. top按钮显现
   监听touchmove事件，document.doucumentElement.scrollTop > 200显现
2. 点击top按钮滚动到顶部的过渡效果
   使用第三方库velocity-animate

import Velocity from 'velocity-animate'

toTop(){
  Velocity(document.body,"scroll"，{duration: 1000})
}

vue组件通信的方式

1. down-props
2. 自定义事件 $emit()
3. 全局事件bus
4. vuex 状态管理

个人主页/收货地址管理

1. 路由配置
   嵌套路由，在个人主页里面还嵌套有子路由

let routes = [{
  /* 路由配置 */
  path:'/',
  component: member,
},{
  path: '/address',
  component: address,
  /* 嵌套路由 */
  children:[{
    path: '',
    redirect: 'all' /* 重定向跳转到/all */
  },{
    name:'all',
    path:'all',
    component:all,
  },{
    name: 'form',
    path:'form',
    component:form,
  }]
}]

2. 路由跳转的方式

• 声明式导航 （router-link 动态绑定to属性）
  <router-link :to="{name:'form' ,query:{type:'add'}}">
• 编程式导航（this.$router）
  除了使用<router-link>创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，在 Vue 实例内部，你可以通过$router访问路由实例

toEdit(list){
  // this.$router.push({path:'/address/form'})
  // 编程式导航
  this.$router.push({name:'form',query:{
      type: 'edit',
      instance: list,
  }})
},

• 总结：
  不论是声明式导航还是编程式导航，获取路由跳转后的参数都是this.$route。
  3. vuex状态管理
  地址列表的初始化，添加，删除，更新，设为默认地址都是通过vuex仓库状态管理。
  创建一个store包含三部分

const store = new Vuex.Store({
  state:{
    lists: null,
  },
  mutations:{
    // 同步操作
    init(state,lists){
      state.lists = lists
    }
  },
  actions:{
    // 异步操作
    getLists(){
      axios.get(url.addressLists).then(res=>{
        // commit触发传入数据,触发init方法
        store.commit('init',res.data.lists)
      })
    }
}

• state
  获取状态对象，通过this.$store.state获取
• mutations
  直接修改state，但是只能是同步操作，通过this.$store.commit执行。
• actions
  通过commit mutations 间接的修改state，可以包含异步操作， 通过this.$store.dispatch调用。