Currently, I am utilizing Nuxt in SPA mode and my page structure is set up like this:
pages
...
- users/
- - index
- - new
- - update/
- - - _id
...
I have a page dedicated to displaying a list of users along with a 'subpage' for adding new users.
On the users/index page, I fetch my users within the asyncData Hook as shown below:
async asyncData({ app: { apolloProvider }, store: { commit, dispatch } }) {
const {
data: { getAllUsers: { success, users, message } },
} = await apolloProvider.defaultClient.query({
query: getAllUsersGQL,
})
if(success) {
await commit('user/setUsers', users, { root: true })
} else {
dispatch('snackbar/notify', { message: message, type: 'error' }, { root: true })
}
},
The functionality seems to be working fine. However, upon navigating to my users/new page, submitting the form, updating the store, and redirecting back to users/index, an unexpected behavior occurs.
The issue lies in not having the newly updated state displayed, but rather a cached or previous state. To tackle this, I've managed to make it function properly by using location.replace. Upon reloading the page, the state is accurately refreshed and updated.
Here's how I handle redirection on the users/new page:
async save() {
if(this.$refs.create.validate()) {
this.loading = true
delete this.form.confirm
await this.createUserStore(this.form)
this.$router.push(
this.localeLocation({
name: 'users',
})
)
this.loading = false
this.$refs.create.reset()
}
},
And here's how I refresh the state in Vuex:
export const mutations = {
updateUsers: (state, payload) => {
state.users = [...state.users, payload].sort((a,b) => a.createdAt - b.createdAt)
},
}
This is how I pass data:
computed: {
...mapGetters({
storeUsers: 'user/getUsers',
storeGetMe: 'auth/getMe',
}),
},
<v-data-table
:headers="headers"
:items="storeUsers"
:search="search"
item-key="id"
class="elevation-1"
dense
>
</v-data-table>
I have tried listing items using v-for as well, but without success. When I console.log the state, I can see all items present, functioning correctly.
What could possibly be causing the view from being updated?
If anyone has encountered a similar issue before, any suggestions would be greatly appreciated.