I'm currently working on a Vue application that is pulling data from the Contentful API. I have a thumbnail (image) field for each entry and I want to extract the main colors as hexadecimal values and store them in the state for use throughout the app.
To achieve this, I am using a Vuex action called getAllProjects to query the API, utilize Vibrant library (node-vibrant), and then commit the response to the state.
async getAllProjects({ commit }) {
let {
fields: { order: order }
} = await api.getEntry("entry");
let projects = order;
projects.forEach(p =>
Vibrant.from(`https:${p.fields.thumbnail.fields.file.url}`)
.getPalette()
.then(palette => (p.fields.accent = palette.Vibrant.hex))
);
console.log(projects);
// Commit to state
commit("setAllProjects", projects);
}
Before calling commit, I can see that the desired hex values are indeed added under the accent key when logging the contents of projects. However, upon inspecting the mutation payload in devtools, the accent key seems to be missing, causing it not to end up in the state.
I am looking for guidance on how to structure these tasks so that the commit only executes once the API call and Vibrant process have run sequentially?