Vuex的使用 实现添加购物车,购物车商品数量加减 以及 IScroll 和 lazyload的使用

知识点:

• IScroll 实现拖动下滑效果
• lazyload实现懒加载效果
• Vuex 的使用
• 加入购物车,购物车的数量加减

商品页面 goods/Index.vue组件

显示所有商品列表,用 IScroll 实现拖动下滑效果, 用 lazyload 实现懒加载效果

<template>
    <div class="box" @touchmove.prevent>
        <ul >
            <li> goods {
  {type}} </li>
            <li is="Item" v-for="item of arr" :key="item._id" :item="item"></li>
        </ul>
    </div>
</template>

<script>
import Item from "./Item.vue"
import { host } from "../../const"
import IScroll from 'iscroll'
import lazy from '../../directives/lazyload'

export default {
    data(){
        return {
            type : "没有分类",
            arr : []
        }
    },
    components:{
        Item
    },
    mounted(){
        // 通过$emit事件在子组件中自定义事件，通过操作子组件中的事件，向父组件传递参数；
        this.$eventbus.$emit("setTitle", "商品")
    
        this.type = this.$route.params.type;
        
        let url = host+"/goods?_type=_type&_word="+this.type+"&_limit=10&_page=1";
        this.$axios.get(url).then(res=>{
            this.arr = res.data.result;
        })

        var that = this;
        var boxH = document.querySelector(".box").offsetHeight;
        
        var myIScroll;
        setTimeout(function(){
            myIScroll = new IScroll(".box");
            myIScroll.on('scrollEnd', function () {
                if( this.y*-1 == document.querySelector(".box>ul").offsetHeight-document.querySelector(".box").offsetHeight ){
                    //console.log('到底啦')
                }else if( this.y == 0 ){
                    //console.log('到头啦')
                }else{
                    //console.log(this.y)