atlas-cache
v1.0.6
Published
Vue3 için basit cache sistemi
Downloads
10
Readme
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 : [email protected]