1 新建一个数据库

(1)在utils文件中新建一个indexedDB.ts

export default class DB {
  private dbName: string // 数据库名称
  constructor(dbName: string){
    this.dbName = dbName
  }
  // 打开数据库
  public openStore() {
    const request = window.indexedDB.open(this.dbName,1)
    request.onsuccess = (event) => {
      console.log("数据库打开成功")
    }
    request.onerror = (event) => {
      console.log("数据库打开成功")
    }
    request.onupgradeneeded = (event) => {
      console.log("数据库打开成功")
    }
  }
}

(2)使用

<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import { fetchRoomList } from "../../api";
import { h, getCurrentInstance } from "vue";
import IndexedDB from '../../utils/indexedDB'
const router = useRouter();
const route = useRoute();
console.log(route.params);
const { proxy }: any = getCurrentInstance();
proxy.$message({
  message: h("p", null, [
    h("span", null, "Message can be"),
    h("i", { style: "color:teal" }, "Vnode"),
  ]),
});
const getRoomList = ()=>{
  fetchRoomList();
}
getRoomList()
const airbnDB = new IndexedDB("airbnb")
airbnDB.openStore()
</script>

<template>
  <!-- 首页 -->
  ---{{$t('message.home')}}---
  <el-button>Default</el-button>
  <button @click="() => router.push({ path: '/mine', query: { id: 1 } })">
    跳转至个人中心
  </button>
  <div class="text">归还借款的符合国家快递费好贵</div>
</template>

<style lang="scss" scoped>
@import "@/assets/scss/home/index.scss";
</style>