Ubah Param Default Axios Tidak Berubah Pada Acara Aksi Vuex

Saya menerapkan situs web di mana pengguna dapat mengubah pilihan bahasa. Preferensi bahasa yang dipilih kemudian dikirim ke API dengan parameter lang

  1. Jika Bahasa diatur ke Bahasa Inggris

/api/test?lang=en

  1. Jika Bahasa diatur ke Bahasa Thailand

/api/test?lang=th

Saya telah menyimpan bahasa tersebut di penyimpanan lokal dan manajemen negara bagian Vuex.

Karena parameter ?lang diperlukan untuk dikirim dalam setiap permintaan, saya memutuskan untuk menggunakan parameter lang sebagai parameter default axios

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

Dengan melakukan hal itu, ia sekarang mengirimkan bahasa awal default ke setiap permintaan. Tapi itu tidak mencerminkan perubahan saat pengguna mengganti bahasa

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 sumber
comment
Mengapa Anda menginisialisasi axios dalam mutasi?   -  person sugars    schedule 24.08.2020
comment
Saya melakukannya untuk mengubah parameter permintaan aksio lang setiap kali pengguna mengubah lang   -  person Lizesh Shakya    schedule 24.08.2020

Jawaban (1)


arrow_upward
2
arrow_downward

Berikut ini adalah kode yang dimodifikasi berdasarkan kode Anda:

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

Letakkan operasi inisialisasi aksio di main.js

getter.js

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

mutasi.js

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

tindakan.js

let actions = {
  updateLanguagePreference({commit}, language) {
    commit('UPDATE_LANGUAGE_PREFERENCE', language)
  }
}
person sugars    schedule 24.08.2020
comment
?lang tidak masuk dalam permintaan. - person Lizesh Shakya; 24.08.2020
comment
Apa versi aksio Anda? Ini berfungsi dengan aksio 0.18.1. Ini tidak bekerja dengan aksio 0,19. - person sugars; 24.08.2020
comment
config.params['lang'] = 'test'. Ketika saya mencoba di atas if(state.getters.languagePreference), tidak berhasil. Ya versi axios adalah ^0.19. - person Lizesh Shakya; 24.08.2020
comment
Apakah ada cara alternatif untuk versi 0,19? - person Lizesh Shakya; 24.08.2020
comment
Melihat kode Anda, saya menemukan masalah pada kode saya. Saya seharusnya menggunakan config.params['lang'] = store.getters.languagePreference di dalam $http.interceptors.request daripada menginisialisasi variabel untuk store.getters.languagePreference. Apakah menggunakan cara Vue.prototype.$http = axios di 0,19? - person Lizesh Shakya; 24.08.2020
comment
Saat ini, saya belum memikirkan cara lain, Anda dapat melakukan fallback ke versi 0.18.1, dan Anda dapat memeriksa masalah - person sugars; 24.08.2020