更改 Axios 默认参数在 Vuex 操作事件上不更改

Question

我正在实现一个用户可以切换语言选择的网站。所选语言首选项因此会通过参数 lang

发送到 API

1. 如果语言设置为英语

/api/test?lang=zh

1. 如果语言设置为泰语

/api/test?lang=th

我已将语言存储在本地存储和 Vuex 状态管理中。

由于每次请求都需要发送 ?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>

Answer 1

以下是根据你的代码修改的代码：

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