组件单击事件修改localStorage中的购物车，组件外的购物车数量随之进行更改

将Vue赋给一个变量

var vue = new Vue({
        el:"#app",
        data:{
            f1:true,
            f2:false,
            cart:JSON.parse(localStorage.carts)
        },
        router:rou,
        created:function(){
            var tt= this;
            window.onscroll = function(){
                var scrollTop = document.querySelector("html").scrollTop;
                if(scrollTop>100){
                    tt.f2 = true;
                }else{
                    tt.f2 = false;
                }
            }
        },
        computed:{
            allcount:function(){
                var allcount = 0;
                var tt = this;
                /*
                不同页面监听在数据变更十多次后，页面会出现卡顿，故放弃

                window.addEventListener("storage", function (e) {
                    tt.cart = JSON.parse(localStorage.carts);
                });*/
                if(localStorage.carts){
                    for(key in tt.cart){
                        allcount += tt.cart[key].num;
                    }
                }
                return allcount;
            }
        }
    })

组件单击事件的最后，修改vue对象的变量，达到触动computed的效果，这时组件外与vue的computed中的addcount所绑定的页面数据会因为与自身有关的vue变量更改而变化。

vue中的有单击事件的组件：

methods:{
            addCart:function(goods){
                if(!localStorage.carts){
                    localStorage.carts = JSON.stringify({});
                }
                var cart = JSON.parse(localStorage.carts);
                if(cart[goods._id]){
                    cart[goods._id].num++;
                    localStorage.carts = JSON.stringify(cart);
                }else{
                    goods.num = 1;
                    cart[goods._id] = goods;
                    localStorage.carts = JSON.stringify(cart);
                }
                /*  将vue的变量进行更改，达到触动computed的效果 */
                vue._data.cart = JSON.parse(localStorage.carts);
            }
        },