您现在的位置是：网站首页> 编程资料编程资料

vue3+Pinia+TypeScript 实现封装轮播图组件_javascript技巧_

2023-05-24 315人已围观

简介 vue3+Pinia+TypeScript 实现封装轮播图组件_javascript技巧_

为什么封装？

  • 迎合es6模块化开发思想
  • 注册为全局组件，可以更好地复用，需要用到的地方，直接使用标签即可

静态结构 后面再进行更改

请求数据都存放在pinia里面

import { defineStore } from 'pinia' import request from '@/utils/request' import { BannerItem, IApiRes } from '@/types/data' export default defineStore('home', { persist: { enabled: true }, state() { return { bannerList: [] as BannerItem[] } }, actions: { // 拿轮播图数据 async getBannerList() { const res = await request.get>('/home/banner') console.log('拿轮播图数据', res) this.bannerList = res.data.result } } })

类型检测

// 所有的接口的通用类型 export interface IApiRes { msg: string, result: T } // 轮播图数据中的项 export type BannerItem = { id: string; imgUrl: string; hrefUrl: string; type: string; }

页面级组件

全局组件

到此这篇关于vue3+Pinia+TypeScript 实现封装轮播图组件的文章就介绍到这了,更多相关vue3 封装轮播图内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：详解React 如何防止 XSS 攻击论$$typeof 的作用_React_

下一篇：vue实现鼠标滑动预览视频封面组件示例详解_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网