vue分类页开发--axios数据获取，localstorage数据缓存

效果图

 

1、首先在app.vue中，给路由添加keep-alive，使其能够被缓存

 

 

2、配置路由 router/index.js

 

 

3、书写各部分组件

src/pages/category/header.vue

 

src/pages/category/tab.vue

 

src/pages/category/content.vue

 

src/pages/category/index.vue

 

4、储存常量和服务器获取来的数据

src/pages/category/config.js

export const CATEGORY_CONTENT_KEY='cyymall-category-content-key';
export const CATEGORY_CONTENT_UPDATE_TIME=1*24*60*60*1000;//1天

export const categoryNames = [
    {
      'name': '热门推荐',
      'id': 'WQR2006'
    },
    {
      'name': '慕淘超市',
      'id': 'WQ1968'
    },
    {
      'name': '国际名牌',
      'id': 'WQ1969'
    },
    {
      'name': '奢侈品',
      'id': 'WQ1970'
    },
    {
      'name': '全球购',
      'id': 'WQ1971'
    },
    {
      'name': '男装',
      'id': 'WQ1972'
    },
    {
      'name': '女装',
      'id': 'WQ1973'
    },
    {
      'name': '男鞋',
      'id': 'WQ1974'
    },
    {
      'name': '女鞋',
      'id': 'WQ1975'
    },
    {
      'name': '内衣配饰',
      'id': 'WQ1976'
    },
    {
      'name': '箱包手袋',
      'id': 'WQ1977'
    },
    {
      'name': '美妆个护',
      'id': 'WQ1978'
    },
    {
      'name': '钟表珠宝',
      'id': 'WQ1979'
    },
    {
      'name': '手机数码',
      'id': 'WQ1980'
    },
    {
      'name': '电脑办公',
      'id': 'WQ1981'
    },
    {
      'name': '家用电器',
      'id': 'WQ1982'
    },
    {
      'name': '食品生鲜',
      'id': 'WQ1983'
    },
    {
      'name': '酒水饮料',
      'id': 'WQ1984'
    },
    {
      'name': '母婴童鞋',
      'id': 'WQ1985'
    },
    {
      'name': '玩具乐器',
      'id': 'WQ1986'
    },
    {
      'name': '医药保健',
      'id': 'WQ1987'
    },
    {
      'name': '计生情趣',
      'id': 'WQ1988'
    },
    {
      'name': '运动户外',
      'id': 'WQ1989'
    },
    {
      'name': '汽车用品',
      'id': 'WQ1990'
    },
    {
      'name': '家居厨具',
      'id': 'WQ1991'
    },
    {
      'name': '家具家装',
      'id': 'WQ1992'
    },
    {
      'name': '礼品鲜花',
      'id': 'WQ1993'
    },
    {
      'name': '宠物生活',
      'id': 'WQ1994'
    },
    {
      'name': '生活旅行',
      'id': 'WQ1995'
    },
    {
      'name': '图书音像',
      'id': 'WQ1996'
    },
    {
      'name': '邮币',
      'id': 'WQ1997'
    },
    {
      'name': '农资绿植',
      'id': 'WQ1998'
    },
    {
      'name': '特产馆',
      'id': 'WQ1999'
    },
    {
      'name': '慕淘金融',
      'id': 'WQ2000'
    },
    {
      'name': '拍卖',
      'id': 'WQ2001'
    },
    {
      'name': '房产',
      'id': 'WQ2008'
    },
    {
      'name': '二手商品',
      'id': 'WQ2002'
    }
  ];

 

5、axios获取数据

src/api/category.js

import axios from 'axios';

// CancelToken：快速发送多个请求时，取消前面的请求，以最后一个为准
const CancelToken=axios.CancelToken;
let cancel;

//获取数据 ajax
export const getCategorys=(id)=>{
    cancel && cancel("取消了前一次请求");
    cancel=null;

    let url='http://www.imooc.com/api/category/content/'+id;

    return axios.get(url,{
        cancelToken:new CancelToken(function executor(c){
            cancel=c;
        })
    }).then(res=>{
        
        if(res.data.code===0){
            console.log("获取category成功");
            return res.data;
        }

        throw new Error('没有成功获取到数据');
    }).catch(err=>{
        console.log(err);
    });
}

 

6、localstorage操作缓存

const storage = window.localStorage;

export default {
  set(key, val) {
    if (val === undefined) {
      return;
    }
    storage.setItem(key, serialize(val));
  },
  get(key, def) {
    const val = deserialize(storage.getItem(key));
    return val === undefined ? def : val;
  },
  remove(key) {
    storage.removeItem(key);
  },
  clear() {
    storage.clear();
  }
};

function serialize(val) {
  return JSON.stringify(val);
}

function deserialize(val) {
  if (typeof val !== 'string') {
    return undefined;
  }
  try {
    return JSON.parse(val);
  } catch (e) {
    return val || undefined;
  }
}

 

最后补充一下，关于 $nextTick