vue3+Pinia+TypeScript 实现封装轮播图组件

目录

• 为什么封装？
• 静态结构 后面再进行更改
• 请求数据都存放在pinia里面
• 类型检测
• 页面级组件
• 全局组件

为什么封装？

• 迎合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 封装轮播图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！