atlas-cache

Kurulum

Projenize kurulumunu tamamlayın

npm i atlas-cache

Projenize dahil edin

Main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import AtlasCachePlugin from 'atlas-cache';

const app = createApp(App);
app.use(AtlasCachePlugin);
app.mount('#app');

Projenizde kullanımı

Listeleme yaparken componenti istediğiniz sayfada kullanabilirsiniz. Parametreler ve kullanım örneği.

<script setup>
import { ref, onMounted } from 'vue';

// API yolunu ve yeni istek durumunu tanımlıyoruz
const path = ref("https://jsonplaceholder.typicode.com/users"); // Endpoint
const newRequest = ref(false); // Yeni istek true / false
const name = ref('users');

// İstek gönderen fonksiyon
const sendPost = () => {
  /**
   *  axios örneği
   *  axios.post('/sendpost').then((response) => {
   *     if(response.data.success){
   *          newRequest.value = true // True değeri yeniden istek gönderir
              setTimeout(() => {
                newRequest.value = false;
              }, 100); // 100ms sonra newRequest'i sıfırla
   *      }
   *   })
   *  Yukarıdaki istek success dönerse liste için yeniden istek güncellenecek
   */
  newRequest.value = true; // True değeri yeniden istek gönderir
  setTimeout(() => {
    newRequest.value = false;
  }, 100); // 100ms sonra newRequest'i sıfırla
}

// Her sayfa yenilendiğinde istek gönderilir
// newRequest değerini izleyen ve her değiştiğinde true-false döngüsü yapan izleyici
/**
 * onMounted(() => {
 * newRequest.value = true; // True değeri yeniden istek gönderir
 * setTimeout(() => {
 *  newRequest.value = false;
 * }, 100); // 100ms sonra newRequest'i sıfırla
 * });
 * 
 **/

</script>

<template>
  <!-- AtlasCache bileşenini kullanarak API'den veri alıyoruz -->
  <AtlasCachePlugin :path="path" :newRequest="newRequest" :name="name">
    <template #default="{ atlas }">
      <ul>
        <!-- Alınan verileri liste olarak gösteriyoruz -->
        <li v-for="item in atlas" :key="item.id">{{ item.name }}</li>
      </ul>
    </template>
  </AtlasCachePlugin>

  <!-- Butona tıklanınca sendPost fonksiyonu çalıştırılıyor -->
  <button @click="sendPost">İstek Gönder</button>
</template>

Destek

Mail : [e-mail]