Блог

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

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

/api/тест?lang=ru

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

/api/test?lang=th

Я сохранил язык в localstorage и Vuex state management.

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

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
        })
    },
}
  

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

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>
  

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

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
}
  

mutations.js

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

actions.js

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