เปลี่ยนพารามิเตอร์เริ่มต้นของ Axios ไม่เปลี่ยนแปลงในเหตุการณ์ Vuex Action

ฉันกำลังติดตั้งเว็บไซต์ที่ผู้ใช้สามารถสลับการเลือกภาษาได้ การตั้งค่าภาษาที่เลือกจึงถูกส่งไปยัง API พร้อมด้วยพารามิเตอร์ lang

1. หากตั้งค่าภาษาเป็นภาษาอังกฤษ

/api/test?lang=th

2. หากตั้งค่าภาษาเป็นภาษาไทย

/api/test?lang=th

ฉันได้จัดเก็บภาษาไว้ใน localstorage และการจัดการสถานะ 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>