VueX - Dispatch action in a different module from an action

Question

I would like to clear user data upon logout, so from auth module I dispatch an action which is defined in a module ride but I am getting an error:

[vuex] unknown local action type: clearUserData, global type: auth/clearUserData

This is my code:

store/modules/auth.js

export const namespaced = true

export const mutations = {
  clearAuthData(state){
    state.apiToken = null
    state.signedIn = false
  }
}

export const actions = {
  logout({ commit, dispatch }) {
    commit('clearAuthData'))
    dispatch('ride/clearUserData', { root: true })

  }
}

store/modules/ride.js

export const namespaced = true

export const state = {
  data: []
}

export const mutations = {
  CLEAR_USER_DATA(state){
    state.data = []
  }
}

export const actions = {  
  clearUserData({ commit }) {
    commit('CLEAR_USER_DATA')
  }
}

store/store.js

import * as auth from './modules/auth'
import * as ride from './modules/ride'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    loading: false
  },
  modules: {
    auth,
    ride
  }
})

What am I doing wrong?

Answer 1

Your usage of dispatch() is incorrectly passing { root: true } as the 2nd argument, which is intended for the payload. Options should be 3rd:

// dispatch('ride/clearUserData', { root: true }) // FIXME: options passed as payload
dispatch('ride/clearUserData', null, { root: true })