Access $i18n in vuex action

[reath]

I want to access the $i18n object in a vuex action in order to reactively change the language. Reading the documentation I came across https://quasar-framework.org/components/internationalization.html#Dynamically-Changing-Language but this doesn’t work for me.

Here’s what I’ve got. mutations.js

export function setLanguage (state, language) {
  state.currentLanguage = language
  LocalStorage.set(LANGUAGE, language)

  import(`src/i18n/${language}`).then(lang => {
    Quasar.i18n.set(lang.default)
    Quasar.i18n.locale = language
    console.log(Quasar.i18n.getLocale())
  })
}

1. lang is successfully populated with the corresponding language set.
2. I know this line Quasar.i18n.locale = language isn’t in the tutorial, but I tried with it.
3. The console.log below outputs the old language and in the UI nothing changes.

I successfully made a component that changes the language, which works reactively on the UI (everything is refreshed with the new language) using the $i18n injected property, but I don’t know how to access it outside of a Vue component

SelectLanguage.vue

<template>
    <q-select
            :options="[
      { label: 'English (US)',         value: 'en-us' },
      { label: 'Bulgarian (BG)',         value: 'bg-bg' },
        ]"
            v-model="lang"/>
</template>

<script>
export default {
  data () {
    return {
      lang: this.$q.i18n.lang
    }
  },
  watch: {
    lang (lang) {
      this.$i18n.locale = lang
    }
  }
}
</script>

Using the line this.$i18n.locale = lang everything just works.

Another question I have, which I’ll maybe answer myself if someone helps me with this problem, is how to access the fallbackLocale outside of a Vue component

[s.molinari]

but this doesn’t work for me

What doesn’t work?

Scott

[reath]

https://quasar-framework.org/components/internationalization.html#Dynamically-Changing-Language this described method to dynamically change the language. As you can see from my setLanguage function in mutations.js it’s the same thing as in the link, but it doesn’t work. Using Quasar.i18n.set(lang.default) to set the new language, the UI does not update and when I call Quasar.i18n.getLocale() afterwards I get us-gb, which is not the language that I’ve set.

Sorry for my bad English, if you cannot understand I’ll try to understand it better. See the code examples

[s.molinari]

Well, Quasar’s i18n is “native” to its components, meaning, the languages available and the i18n system is only for Quasar’s components. Needing the i18n object outside of the components is basically not necessary. You set it once in, say, a layout component and you are good to go for all further components, as the docs explain.

Scott