前端项目，个人笔记（六）【无限滚动 + pinia进行用户数据持久化 + 拦截器】

目录

1、无限滚动

2、使用pinia进行用户数据持久化

3、完善个人笔记三中的拦截器

请求拦截器：

响应拦截器：

---

1、无限滚动

使用elementplus中提供的：

代码：

<div class="body" v-infinite-scroll="load" >
        <!-- 商品列表-->
        <GoodsItem v-for="good in goodList" :good="good" :key="good.id"></GoodsItem>
</div>

load函数实现：

const load = async () => {  
  // 获取下一页的数据
  reqData.value.page++
  console.log(reqData.value.page)
  const res = await getSubCategoryAPI(reqData.value)
  //新加载的数据与老数据进行拼接合并
  goodList.value = [...goodList.value, ...res.result.items]  
}

当所有数据都加载结束后，需要停止加载：

使用：

<div class="body" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
        <!-- 商品列表-->
        <GoodsItem v-for="good in goodList" :good="good" :key="good.id"></GoodsItem>
</div>

disabled值【true/false】实现：

const disabled = ref(false);
const load = async () => {
  console.log('加载更多数据咯')
  // 获取下一页的数据
  reqData.value.page++
  const res = await getSubCategoryAPI(reqData.value)
  //新加载的数据与老数据进行拼接合并
  goodList.value = [...goodList.value, ...res.result.items]
  // 加载完毕 停止监听
  if (res.result.items.length === 0) {
    disabled.value = true
  }
}

关于无限滚动的其他属性，可自行尝试~

---

2、使用pinia进行用户数据持久化

        为什么要进行持久化，因为在我们进行登录后，用户数据存在，页面已刷新，用户数据就没了，就会又呈现一个未登录的状态，因此需要用户数据持久化~

• 安装：npm i pinia-plugin-persistedstate
• 修改main.js内容：
• 接口调用处【pinia封装的这里】：

效果：

---

3、完善个人笔记三中的拦截器

请求拦截器：

// 一般会进行token身份验证等
http.interceptors.request.use(config => {
  const userStore = useUserStore();
    const token = userStore.userInfo.token;
    if(token){
        config.headers.Authorization = `Bearer ${token}`
    }
  return config
}, e => Promise.reject(e))

请求带上token

响应拦截器：

// 一般进行错误的统一提示，token失效的处理等
http.interceptors.response.use(  
  response => {  
    // 对响应数据做点什么  
    return response.data;  
  },  
  error => {  
    if (error.response) {  
      // 请求已发出，服务器也响应了状态码，但状态码不在 2xx 范围内  
      //统一错误提示
        ElMessage({
          type: 'error',
          message: e.response.data.message
      })
      //401token失效处理
      const userStore = useUserStore();
      if(e.response.status === 401){
          userStore.clearUserInfo()
          // 跳到登录页
          router.push('/login')
      }
      return Promise.reject(error.response);  
    }  
      
    // 处理网络错误等  
    return Promise.reject(error.message || 'Error');  
  }  
);

下期见~