Within my Nuxt JS 2.9 application, I have implemented Vuex to store and retrieve data in my layout. The issue I am facing is that when I set data into the Vuex store on a page-specific basis, it requires me to refresh the page in order to see the updated data, otherwise it displays outdated information.
For instance, on the Homepage, I use the following code:
mounted () {
this.$store.commit('toolbar/setToolbar', {
name: 'Homepage'
})
}
And on the Settings page:
mounted () {
this.$store.commit('toolbar/setToolbar', {
name: 'Settings'
})
}
This data gets stored in Vuex like this:
export const state = () => ({
toolbarData: [{
name: 'Homepage'
}]
})
export const mutations = {
/*
* Toolbar data
*/
setToolbar (state, data) {
const settings = {
name: data.name != null ? data.name : ''
}
state.toolbarData[0] = settings
}
}
When transitioning between the Homepage and Settings pages, the state updates accordingly but does not reflect in real-time on the page itself.
I have attempted switching the lifecycle hook from mounted to created and beforeCreate hoping that it would commit to the store before the page finishes loading, but the issue persists.