Esto es lo que tengo ahora. En mi mount() tengo fetchCoins() pero eso hace que cada vez que un usuario actualice, se llame a la API
Estoy tratando de hacer que la API se llame, los datos se almacenan en el almacenamiento local y luego se obtienen los datos cada minuto.
methods: { async fetchCoins() { const response = await fetch("https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false&price_change_percentage=1h"); const data = await response.json(); this.coins = this.coins.concat(data); }, setData() { localStorage.setItem('coin-info', JSON.stringify(this.coins)) }, getData() { let get = localStorage.getItem('coin-info', []); this.coins = JSON.parse(get); console.log(this.coins); setInterval(() => { this.fetchCoins() }, 60000); }, }Debe realizar un seguimiento en localStorage sobre la fecha en que ocurrió la última recuperación. Aquí hay una implementación de ejemplo:
scheduleNextFetchCoins() { const lastFetch = new Date(localStorage.getItem('coin-info-last-fetch')); const timeDelta = Date.now() - lastFetch.valueOf(); const nextCall = Math.max(60000 - timeDelta, 0); setTimeout(() => { this.fetchCoins(); localStorage.setItem('coin-info-last-fetch', new Date()); this.scheduleNextFetchCoins(); }, nextCall) } Debe cambiar la llamada a this.fetchCoins() en la función mounted para esta.
Pero tenga en cuenta que hay un par de advertencias sobre este fragmento (fuera del alcance de la pregunta):
setTimeout y setInterval no son funciones de tiempo totalmente precisas. Podrían retrasarse algunos milisegundos. Si le preocupa esta inexactitud, eche un vistazo a otras preguntas que proponen soluciones como esta .coin-info-last-fetch .setTimeout en los datos del componente para poder borrarla eventualmente.