Vue.js Vuex action do not see getter from other module

Question

Im trying to use getter from other module to get JWT token to my http query, which is looking like that:

 ...
    },
    actions: {
        async refreshContactData( state, getters, rootState, rootGetters ) {

            
            
            
            return axios.get('/test', {
                headers: {
                    Authorization: 'Bearer ' + rootGetters['user/getJWT']//the token is a variable which holds the token
                }
              }).then(response => {
                console.log(response)
            })
        }
    },
}

my second modlue look like this:

//user.js

import axios from "axios"


export default {
    state: {
        jwt: 'asdfasdf',

    },
    getters: {
        getJWT: (state) => {
            console.log("WTF")
            return state.jwt;
          }

    },
    ...

its connected with main index.js store file:

 //index.js
    
   ...
      modules: {
        user: User,
        contact: Contact
      },
   ...

i tried different configuration but im still getting "undefined" error in console:

vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'user/getJWT' of undefined
    at _callee$ (contact.js?7526:54)
    at tryCatch (runtime.js?96cf:63)
    at Generator.invoke [as _invoke] (runtime.js?96cf:293)
    at Generator.eval [as next] (runtime.js?96cf:118)
    at asyncGeneratorStep (asyncToGenerator.js?1da1:3)
    at _next (asyncToGenerator.js?1da1:25)
    at eval (asyncToGenerator.js?1da1:32)
    at new Promise (<anonymous>)
    at eval (asyncToGenerator.js?1da1:21)
    at Store.refreshContactData (contact.js?7526:47)

What am i doing wrong?

Answer 1

Actions don't have multiple arguments like getters do. They have a context argument and a payload argument. To get the rootGetters you can destructure the context argument:

async refreshContactData({ rootGetters }) { // notice the braces
...
}

Then rootGetters will be defined.