Vuejs, components and cache - vue.js

Question

i was looking for a way to 'cache' some API fetched data in my application, and find out it can simply be done with localStorage (or even sessionsStorage)
While it works fine, i'm looking for a way to have all the cached data in one localStorage entry (in JSON)
The problem is i can't figure out how to build the JSON tree without overriding previous item. Let me explain :
On my dashboard, I have two components, one that load categories, the other loading last articles. Each component uses a different endpoint.
this is how i set cache (for categories) :
methods: {
async getCategories() {
let response = await fetch('https://carreblanc.zendesk.com/api/v2/help_center/fr/categories.json', {
method: 'GET',
headers: zendeskHeaders,
})
if (response.status === 200) {
let data = await response.json();
this.categories = data.categories
// Build cache
let cacheData = []
cacheData.push(data)
sessionStorage.setItem('zhc_db_cat_cache', JSON.stringify(cacheData))
}
else {
console.log("Something went wrong (" + response.status + ")");
return Promise.reject(response);
}
},
setUrl(url) {
return decodeURI(url.substring(url.indexOf('-') + 1))
}
},
for articles :
methods: {
async getArticles() {
let response = await fetch('https://carreblanc.zendesk.com/api/v2/help_center/fr/articles.json', {
method: 'GET',
headers: zendeskHeaders,
})
if (response.status === 200) {
let data = await response.json();
this.articles = data.articles
// Build cache
let cacheData = []
cacheData.push(data)
sessionStorage.setItem('zhc_db_art_cache', JSON.stringify(cacheData));
}
else {
console.log("Something went wrong (" + response.status + ")");
return Promise.reject(response);
}
},
setUrl(url) {
return decodeURI(url.substring(url.indexOf('-') + 1))
}
},
this results in two entries in the sessionStorage :
I want only one item, let's say 'zhc_cache', in which i can update data while components load..
for example : dashboard: {
categories: {
......
},
articles: {
......
}
}
I think there's something going on with the async function, but i can't figure it out,
any help will be appreciated :)
Thanks

Answer 1

If i understand it correctly, you just want one JSON object with categories AND data?
In that case, i think you should create an object ("zn_cache"), in which you add categories and articles
//If you want to keep both functions, just set vuejs data variables (categories and articles) and affect them the data you fetched from the api
this.categories = data.categories
this.articles = data.articles
Then you can create a global object with both (check the syntax I'm not 100% sure)
let dashboard = { 'categories' : this.categories, 'articles' : this.articles}
Then you can store this bad boy

Answer 2

#antoinehenrio
works like a charm ;)
here is the dashboard now
const zendeskConfig = {
categoriesEndpoint: 'https://carreblanc.zendesk.com/api/v2/help_center/fr/categories.json',
articlesEndpoint: 'https://carreblanc.zendesk.com/api/v2/help_center/fr/articles.json'
};
import Categories from '/skin/frontend/carreblanc/revamp/js/zendesk/hc/components/dashboard/categories.js'
import Recents from '/skin/frontend/carreblanc/revamp/js/zendesk/hc/components/dashboard/recent-activity.js'
export default {
components: {
Categories,
Recents
},
data() {
return {
categories: [],
articles: [],
}
},
methods: {
getData() {
Promise.all([
fetch(zendeskConfig.categoriesEndpoint).then(res => res.ok && res.json() || Promise.reject(res)),
fetch(zendeskConfig.articlesEndpoint).then(res => res.ok && res.json() || Promise.reject(res))
]).then(([resCategories, resArticles]) => {
this.categories = resCategories.categories
this.articles = resArticles.articles
let cacheData = { dashboard: { 'categories' : this.categories, 'articles' : this.articles} }
sessionStorage.setItem('zhc_db_cache', JSON.stringify(cacheData))
})
}
},
created() {
this.getData()
},
template: `
<div class="row">
<div class="col col-12">
<Categories :categories=this.categories />
</div>
<div class="col col-12">
<Recents :articles=this.articles />
</div>
</div>
`
}
and the result :
I have to reconfigure the other views, but it should be easy now
Thanks again !