Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams export default class Internationalize extends Vue { protected selectedLanguage: any = this.$store.getters['globalLocale']; private langages = this.$store.getters['globalLanguages']; protected switchLanguage(locale: any) { if (locale !== this.selectedLanguage.locale) { const newLanguage = this.langages.find((lang: any) => lang.locale === locale); this.$store.dispatch('updateLocale', newLanguage);

this.$store.dispatch('updateLocale', newLanguage); The state globalLanguages will be changed but my variable selectedLanguage isn't reactive..

Thanks

EDIT : WORK GREAT

import { Component, Vue } from 'vue-property-decorator';
  import { mapGetters } from 'vuex';
  @Component({
    computed: {
      ...mapGetters({
        selectedLanguage: 'globalLocale',
        langages: 'globalLanguages'
  export default class Internationalize extends Vue {
    protected selectedLanguage!: any;
    protected langages!: any;
    protected flag = this.$store.getters.globalLocale.flagSuffix;
    protected switchLanguage(locale: any) {
      if (locale !== this.selectedLanguage.locale) {
        const newLanguage = this.langages.find((lang: any) => lang.locale === locale);
        this.$store.dispatch('updateLocale', newLanguage).then(() => {
          this.$i18n.locale = locale;
          this.$i18n.setLocaleMessage(this.$i18n.locale, this.$store.getters.globalTranslations);
          this.$i18n.fallbackLocale = process.env.VUE_APP_DEFAULT_LOCALE;
                OP has posted the same question in GitHub issues: github.com/kaorun343/vue-property-decorator/issues/195
– erb
                Mar 15, 2022 at 12:40
That is because selectedLanguage is not a computed property/getter, so it's value is only assigned when the class is instantiated, and not when the store's globalLocale is updated later.
The first solution is to simply covert your selectedLanguage into a computed property (aka getter) in the component itself:
protected get selectedLanguage() {
    return this.$store.getters['globalLocale'];
Alternatively, you can also use mapGetters in the @Component decorator instead: 
@Component({
    computed: {
        ...mapGetters({
            selectedLanguage: 'globalLocale'
However, the problem with this is that you lose type safety in the second solution, and you will have to declare the type returned for selectedLanguage, if you wish, in the component itself, i.e.:
@Component({
    computed: {
        ...mapGetters({
            selectedLanguage: 'globalLocale'
export default class Internationalize extends Vue {
    protected selectedLanguage!: <YourTypeHere>
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.