Изменить параметры по умолчанию Axios, не изменяющиеся при событии действия Vuex

Я реализую веб-сайт, пользователи которого могут переключать выбор языка. Таким образом, выбранное языковое предпочтение отправляется в API с параметром lang.

  1. Если язык установлен на английский

/api/test?lang=ru

  1. Если язык установлен на тайский

/api/test?lang=th

Я сохранил язык в локальном хранилище и управлении состоянием Vuex.

Поскольку параметр ?lang необходим для отправки в каждом запросе, я решил использовать параметр lang в качестве параметра по умолчанию axios.

мутации.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
        })
    },
}

Делая это, теперь он отправляет исходный язык по умолчанию на каждый запрос. Но это не отражает изменений, когда пользователь переключает язык

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>

vue.js axios vuex vuejs2 vue-component
person Lizesh Shakya    schedule 24.08.2020    source источник
comment
Почему вы инициализировали axios в мутациях?   -  person sugars    schedule 24.08.2020
comment
Я сделал, чтобы изменить параметр запроса axios lang всякий раз, когда пользователь изменяет lang   -  person Lizesh Shakya    schedule 24.08.2020

Ответы (1)


arrow_upward
2
arrow_downward

Ниже приведен модифицированный код, основанный на вашем коде:

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

Поместите операцию инициализации axios в main.js

getters.js

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

мутации.js

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

действия.js

let actions = {
  updateLanguagePreference({commit}, language) {
    commit('UPDATE_LANGUAGE_PREFERENCE', language)
  }
}
person sugars    schedule 24.08.2020
comment
?lang не входит в запрос. - person Lizesh Shakya; 24.08.2020
comment
Какая у вас версия аксиоса? Это работает с axios 0.18.1. Не работает с аксиос 0.19. - person sugars; 24.08.2020
comment
config.params['lang'] = 'test'. Когда я пробовал выше if(state.getters.languagePreference), это не сработало. Да, версия axios ^0.19. - person Lizesh Shakya; 24.08.2020
comment
Есть ли альтернативный способ для версии 0.19? - person Lizesh Shakya; 24.08.2020
comment
Глядя на ваш код, я обнаружил проблему в своем коде. Я должен был использовать config.params['lang'] = store.getters.languagePreference внутри $http.interceptors.request вместо инициализации в переменной для store.getters.languagePreference. Используете ли вы Vue.prototype.$http = axios способ в 0.19? - person Lizesh Shakya; 24.08.2020
comment
В настоящее время я не думал о других способах, вы можете вернуться к версии 0.18.1 и проверить проблемы - person sugars; 24.08.2020