Change Axios Default Params Not Changing On Vuex Action Event

Question

I am implementing a website which users can toggle the language selection. Selected language preference is thus sent to the API with the parameter lang

1. If Language is set to English

/api/test?lang=en

2. If Language is set to Thai

/api/test?lang=th

I have stored the language in localstorage and Vuex state management.

Since, ?lang parameter is needed to sent in every request, I decided to use lang parameter as axios default parameter

mutations.js

let mutations = {
    UPDATE_LANGUAGE_PREFERENCE(state, language) {
        if (language.toLowerCase() === ENGLISH_LANGUAGE_CODE) {
            state.languagePreference = ENGLISH_LANGUAGE_CODE;
        } else {
            state.languagePreference = THAI_LANGUAGE_CODE;
        }


        Vue.prototype.$http = axios
        let languagePreference = store.getters.languagePreference
        if (!languagePreference) {
            languagePreference = LANGUAGE_PREFERENCE
        }
        Vue.prototype.$http.interceptors.request.use((config) => {
            config.params = config.params || {}
            config.params['lang'] = languagePreference
            return config
        })
    },
}

Doing it, it now sends the default intial language to every request. But it does not reflect the changes when user toggles the language

NavbarComponent.vue

<script>
    ...
        methods: {
        updateLanguagePreference() {
            if (!this.isThai) {
                this.$store.dispatch('updateLanguagePreference', THAI_LANGUAGE_CODE)
            } else {
                this.$store.dispatch('updateLanguagePreference', ENGLISH_LANGUAGE_CODE)
            }


            axios.get('/test', {
            })
        }
    },
    ...
</script>

Answer 1

The following is the modified code based on your code:

main.js

import store from 'store'

const $http = axios.create()
$http.interceptors.request.use((config) => {
  let params = config.params || {}
  if (store.getters.languagePreference) {
    config.params = {...params, lang: store.getters.languagePreference}
  }
  return config
})

Vue.prototype.$http = axios

Put the axios initialization operation in main.js

getters.js

let getters = {
  languagePreference: state => state.languagePreference // or state.yourModuleName.languagePreference
}

mutations.js

let mutations = {
  UPDATE_LANGUAGE_PREFERENCE(state, language) {
    state.languagePreference = language
  }
}

actions.js

let actions = {
  updateLanguagePreference({commit}, language) {
    commit('UPDATE_LANGUAGE_PREFERENCE', language)
  }
}