How to call action inside action in Vuex

Question

I try to build a really small Vue App with a Rails API. So at the moment I work with Vue, Vue-Resource and Vuex. I'll fetch all users from the database und now i try to update one of them. So everythings works fine (patch User), but after running the updateUser action I want to run the fetchUsers action again to update the Vuex store.

But when the fetchUsers runs inside the updateUser promise I get the following error:

undefined:1 Uncaught (in promise) TypeError: Cannot read property 'dispatch' of undefined

this is what my vuex/actions.js are looking:

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 now that the fetchUsers action somehow loses context(?) but I don't know how to deal with that! thanks for every help!

Solution 1

this is how i got it to working :)

import Vue from 'vue'

export const fetchUsers = ({ dispatch, state }) => {
  Vue.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 = ({ dispatch, state }, user) => {
  Vue.http.patch('http://localhost:3000/api/v1/users/' + user.id, {user: user}).then((response) => {
    fetchUsers({dispatch})
  }, (response) => {
    dispatch('SET_USERS', [])
    console.log(response)
  })
}

Solution 2

When you console.log('this', this) inside of store module, you can see dispatch listed in that context. so you can use it like so.:

// inside of store/test.js module
export const state = () => ({
    test: 'somestate'
})

export const mutations = {
  ACTION_TWO(state, data) {
    state.test = data;
  }
}

export const actions = {
  actionOne({ commit }, value) {
     this.dispatch('test/actionTwo', value); // moduleName/action
  },
  actionTwo({ commit }, valueToCommit) {
    commit('ACTION_TWO', valueToCommit);
  }
}

Comments

[Martin Verdejo]

i have the same structure, im getting fetchUsers is not defined.

[Ali]

You may want to use like that; js actionOne({ commit, dispatch }, value) { dispatch('test/actionTwo', value) }