Change Axios Default Params Not Changing On Vuex Action Event - vue.js

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
If Language is set to English
/api/test?lang=en
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)
}
}