I am currently working on a small Vue App with a Rails API where I am using Vue, Vue-Resource, and Vuex. I have successfully fetched all users from the database and now I am trying to update one of them. The patch operation for updating the user is working fine, but after running the updateUser action, I want to refresh the Vuex store by running the fetchUsers action again.
However, when I try to run fetchUsers inside the updateUser promise, I encounter the following error:
undefined:1 Uncaught (in promise) TypeError: Cannot read property 'dispatch' of undefined
This is how my vuex/actions.js file looks like:
export const fetchUsers = function ({ dispatch, state }) {
this.$http.get('http://localhost:3000/api/v1/users').then((response) => {
dispatch('SET_USERS', response.data)
}, (response) => {
dispatch('SET_USERS', [])
console.log(response)
})
}
export const updateUser = function ({ dispatch, state }, user) {
this.$http.patch('http://localhost:3000/api/v1/users/' + user.id, {user: user}).then((response) => {
fetchUsers()
}, (response) => {
console.log(response)
})
}
I understand that the fetchUsers action seems to lose context somehow, but I am unsure how to address this issue. Any assistance would be greatly appreciated!