儿童网站开发,个人网页设计图片素材,智慧团建信息系统网站,濮阳新闻综合频道目录
1. Suspense标签
2.发布订阅者模式
3.pinia的使用
4.在请求过来的数据添数据
5.设置token和取token
6. 实现触底加载
7.导航守卫判断登录状态。 1. Suspense标签
Suspense主要用于用于处理异步组件加载和数据获取。#xff0c;使用这个标签可以允许你在组件等待数…目录
1. Suspense标签
2.发布订阅者模式
3.pinia的使用
4.在请求过来的数据添数据
5.设置token和取token
6. 实现触底加载
7.导航守卫判断登录状态。 1. Suspense标签
Suspense主要用于用于处理异步组件加载和数据获取。使用这个标签可以允许你在组件等待数据或资源加载时显示一个占位符通常是加载指示器并在数据准备好后显示实际内容。这对用户体验来说非常重要因为可以避免在数据加载过程中用户看到空白页面或不完整的内容。一般当我们请求数据都会用到async和await,此时就可以在app.vue页面中用 Suspense /Suspense包裹住页面占位符 RouterView/RouterView进行使用。 SuspenseRouterView/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.countnumber.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.dataCategoricallists.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 classbox scrollpageScroll/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 falseelse {next();//使用了next参数就不再使用返回值true/false来决定是否跳转。因为next()不带参数等价于return true,允许跳转}// 保证任意条件下next只执行一次 })
路由的重定向
// 重定向路由router.replace(route.query.target)
