vue实现本地常用网站存储，并排序筛选top10

最近网站根据需求要做本地存储常用网站访问的记录的功能；我的大致思路是点击的时候便存储到本地，然后进行数据的筛选，存放在store全局里面，实时改变常用网站的列表的排序。
首先在store里面定义web存储数组的字段；

image.png

然后再你需要获取的数据的页面进行获取数据和监听数据改变，进而进行赋值

image.png
然后就是我点击访问网站进行的一系列操作

setWebs(item){
//item是当前点击的网站的那条完整数据
    //存储常用网站
      //先获取本地存储的网站
      var web=[];
      if(JSON.parse(window.localStorage.getItem("web"))){
        web=JSON.parse(window.localStorage.getItem("web"));
      }
      this.visits++;
      //先判断是否存储过,如果存在不再存在,web是空数组
      if(web.length==0){
        web.push({
                        id:item.id,
                name:item.name,
                logo:item.logo,
                type:item.type,
                visits:this.visits
                })
      }else{
            //当前已经存在  //index==-1 不存在，等于其他代表当前的index值
            let index = web.findIndex((row) => {
                    return item.id === row.id
                })
            //web.some(ele => ele.id==item.id) 当前点击的元素在数组中是否存在
                if(web.some(ele => ele.id==item.id)){
                    web[index].visits+=1;
                }else{
                    web.push({
                                id:item.id,
                        name:item.name,
                        logo:item.logo,
                        type:item.type,
                        visits:this.visits
                            })
                }
      }
      //对存储到本地的网站，根据访问量进行筛选排序，调用下面的方法
      web.sort(this.sortBy('visits',false));
      //只存前10个
//    var arr=web.splice(0,10);
            //存储全部的网站，获取的时候只拿前10个
      var arr=web;
            //然后再次存储到本地
            window.localStorage.setItem("web", JSON.stringify(arr));
            var data={};
            data['常用网站']=JSON.parse(JSON.stringify(arr));
            //修改全局的值，时时改变列表数据
            this.$store.dispatch('global/changeWeb',data);
   },
   /**数组根据数组对象中的某个属性值进行排序的方法 
     * 使用例子：newArray.sort(sortBy('number',false)) //表示根据number属性降序排列;若第二个参数不传递，默认表示升序排序
     * @param attr 排序的属性 如number属性
     * @param rev true表示升序排列，false降序排序
     * */
    sortBy(attr,rev){
        //第二个参数没有传递 默认升序排列
        if(rev ==  undefined){
            rev = 1;
        }else{
            rev = (rev) ? 1 : -1;
        }
        
        return function(a,b){
            a = a[attr];
            b = b[attr];
            if(a < b){
                return rev * -1;
            }
            if(a > b){
                return rev * 1;
            }
            return 0;
        }
    }