web学习笔记（六十六）项目总结

目录

1. Suspense标签

2.发布订阅者模式

3.pinia的使用

4.在请求过来的数据添数据

5.设置token和取token

6. 实现触底加载

7.导航守卫判断登录状态。

---

1. Suspense标签

Suspense主要用于用于处理异步组件加载和数据获取。，使用这个标签可以允许你在组件等待数据或资源加载时显示一个占位符（通常是加载指示器），并在数据准备好后显示实际内容。这对用户体验来说非常重要，因为可以避免在数据加载过程中用户看到空白页面或不完整的内容。一般当我们请求数据都会用到async和await,此时就可以在app.vue页面中用 <Suspense> </Suspense>包裹住页面占位符  <RouterView></RouterView>进行使用。

  <Suspense>
    <RouterView></RouterView>
  </Suspense>

2.发布订阅者模式

发布订阅者模式中得先触发发布的语句，订阅方才会获得数据，所以在组件路由中获取数据并发布，在app.vue及其他路由组件中进行订阅是无法实现实时更新的，比如购物车的数量。此时我们可以使用pinia来完成这个操作，这两者有本质的区别，前者是用来传值的，后者是用来实现全局状态共享。

3.pinia的使用

（1）下载对应的库文件，如果在构建脚手架时已经选择了使用pinia进行状态管理那就不用再单独下载pinia了。

npm i pinia

(2)在main.js文件中配置pinia

import { createPinia } from 'pinia'
app.use(createPinia())

(3)在stores文件夹下创建.js文件，然后在文件中编写相关共享状态的数据，通常我们将一类状态编写在同一个.js文件中，在这个文件中需要导出defineStore，并暴露useCounter模块。 state属性是配置公告状态（数据）actions：定义修改公共状态的方法

import { defineStore } from "pinia";

export const useCounter = defineStore("counter", {
 // state属性：配置公共状态(数据)
 state: () => {
 return { count: 0};
 },
 // actions：定义修改公共状态的方法
 actions: {
increment() {
 this.count++;
}
}
},);

（4）在需要用到useCounter的组件中进行导入和初始化的操作。

// 导入pinia
import { useCounter } from '@/stores/counter.js'
// 初始化对象
const counter = useCounter()

（5）通过counter 来调用相关变量和方法 

counter.increment()
counter.count=number.value

4.在请求过来的数据添数据

当请求过来的数据比我们需要的数据少时，我们可以自己将所需数据添加进去，比如分类中的全部，通常是接口数据中不包含的，此时就需要我们自己将分类添加到数据中去。

（1）在初始化时就将全部的数据以对象的方式放入数组中

// 初始商品分类的数据
const Categoricallists = ref([{ id: 0, cate_name: '全部' }])

（2）使用.push的方式将接口返回的数据添加到 数组Categoricallists中。注意：我们从接口中拿到的是一个数组，在push时需要将数据解构出来。

const sidebarreq = async () => {
  const sidebarres = await http(`/api/category`)
  sidebararr.value =  sidebarres.data
  Categoricallists.value.push(...data[0].children)

}
sidebarreq()

5.设置token和取token

设置token(将token存到本地存储中):  localStorage.setItem('data', data.data.token)

取token(从本地存储中取token):const token = localStorage.getItem('data')

6. 实现触底加载

（1）给盒子添加滚动事件

 <div class="box" @scroll="pageScroll"></div>

(2)写触底加载事件的逻辑

// 触底事件
const pageScroll = async (e) => {
  const sTop = e.target.scrollTop // 容器已滚动高度
  const sHeight = e.target.scrollHeight // 容器内容总高度
  const cHeight = e.target.clientHeight // 容器元素高度

  if (sHeight - sTop <= cHeight) {
    console.log('触底了')
  
  }
}

（3）注意需要给box设置固定的高度，不能把高度设为auto。

7.导航守卫判断登录状态。

 在index.js中写入相关代码，注意，此时如果没有登录，在跳转登录页面时我们已经通过to.path将我们需要跳转到的页面以参数的形式传递到了登录页面，我们可以在登录页面进行获取，如何进行路由的重定向

router.beforeEach((to, from,next) => {
 
    // to：目的地页面路由 from:当前要切换的路由
 
    // 返回false以取消导航
 
    // 一般需要授权验证的页面才需要拦截，其他页面直接放行。
 
    if (to.path == '/Shoppingcart'||to.path == '/Personal') {
 
        if (localStorage.getItem('data')) next();//已登录，允许跳转
 
        else {
 
            console.log('请先登录');
 
            next(`/login?target=${to.path}`)//跳转登录页面
 
        }
 
    }
 
    // return false
 
    else {
 
        next();//使用了next参数就不再使用返回值true/false来决定是否跳转。因为next()不带参数等价于return true,允许跳转
 
    }
 
    // 保证任意条件下next只执行一次  
 
})

路由的重定向：

//   重定向路由
  router.replace(route.query.target)