src/components/HelloWorld.vue - dev - vdele/app

src/components/HelloWorld.vue
109 строк3 KB
Vasilii Polshakov
Initial commit
25 мар 2025, 01:21
25 мар 2025, 01:216a154a4
<script setup lang="ts">
import { ref, computed } from 'vue'

defineProps<{ msg: string }>();

const users = ref();
const fetching = computed(() => users);

const clickFetchAll = () => {
  const openRequest: IDBOpenDBRequest = indexedDB.open('MyDatabase', 1);

  // onupgradeneeded
  openRequest.onupgradeneeded = (event: IDBVersionChangeEvent) => {
    const db: IDBDatabase = (event.target as IDBOpenDBRequest).result;

    if (!db.objectStoreNames.contains("users")) {
      //const store: IDBObjectStore = 
      // создание таблицы
      db.createObjectStore("users", {
        keyPath: "id",
        autoIncrement: true,
      });
    }

  };

  openRequest.onsuccess = (event: Event) => {
    const db: IDBDatabase = (event.target as IDBOpenDBRequest).result;

    const transaction: IDBTransaction = db.transaction("users", "readonly");
    const store: IDBObjectStore = transaction.objectStore("users");

    const getRequest: IDBRequest = store.getAll();

    getRequest.onsuccess = () => {
      users.value = getRequest.result;
    };

    getRequest.onerror = () => {
      console.error('Ошибка при выгрузке');
    };
  }

  // ошибки
  openRequest.onerror = (event: Event) => {
    console.error("Error opening database:", (event.target as IDBOpenDBRequest).error);
  };
};

const clickHandler = () => {
  const openRequest: IDBOpenDBRequest = indexedDB.open("MyDatabase", 1);
  
  // onupgradeneeded
  openRequest.onupgradeneeded = (event: IDBVersionChangeEvent) => {
    const db: IDBDatabase = (event.target as IDBOpenDBRequest).result;

    if (!db.objectStoreNames.contains("users")) {
      //const store: IDBObjectStore = 
      // создание таблицы
      db.createObjectStore("users", {
        keyPath: "id",
        autoIncrement: true,
      });
    }

  };
  
  openRequest.onsuccess = (event: Event) => {
    const db: IDBDatabase = (event.target as IDBOpenDBRequest).result;

    // Добавление данных
    const transaction: IDBTransaction = db.transaction("users", "readwrite");
    const store: IDBObjectStore = transaction.objectStore("users");

    const user: {name: string, age: number} = { name: "Alice", age: 25 };
    const addRequest: IDBRequest = store.add(user);

    addRequest.onsuccess = () => {
      alert("User added");
    };
  };

  // ошибки
  openRequest.onerror = (event: Event) => {
    console.error("Error opening database:", (event.target as IDBOpenDBRequest).error);
  };
  
};
</script>

<template>
  
  <h1>{{ msg }}</h1>
  <div v-if="fetching.value" class="card">{{ fetching }}</div>
  <div v-else>Пользователей: 0</div>

  <div class="card">
    <button type="button" @click="clickHandler" disabled>Добавить пользователя</button>
  </div>

  <div class="card">
    <button type="button" @click="clickFetchAll">Выгрузить пользователей</button>
  </div>

</template>

<style scoped>

</style>