Реакция Vuex и vue-property-decorator с $ store - PullRequest
Новая
       34

Реакция Vuex и vue-property-decorator с $ store

0 голосов
/ 18 апреля 2019

Я пытаюсь использовать vuex $ store на моем @Component. Но не быть реактивным: /

Пример: 

import { Component, Vue } from 'vue-property-decorator';

  @Component
  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); Состояние globalLanguages будет изменено, но моя переменная selectedLanguage не реагирует ..

Спасибо

РЕДАКТИРОВАТЬ: РАБОТАЕТ БОЛЬШОЙ 

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

1 Ответ

1 голос
/ 18 апреля 2019

Это связано с тем, что selectedLanguage не является вычисляемым свойством / получателем, поэтому его значение присваивается только при создании экземпляра класса, а не при обновлении хранилища globalLocale позже.

Первое решениеэто просто конвертировать selectedLanguage в вычисляемое свойство (он же getter) в самом компоненте: 

protected get selectedLanguage() {
    return this.$store.getters['globalLocale'];
}

В качестве альтернативы, вы также можете использовать mapGetters в декораторе @Component вместо : 

@Component({
    computed: {
        ...mapGetters({
            selectedLanguage: 'globalLocale'
        })
    }
})

Однако проблема заключается в том, что вы теряете безопасность типов во втором решении, и вам придется объявить тип, возвращаемый для selectedLanguage, если хотите, в компоненте.сам, то есть: 

@Component({
    computed: {
        ...mapGetters({
            selectedLanguage: 'globalLocale'
        })
    }
})
export default class Internationalize extends Vue {
    protected selectedLanguage!: <YourTypeHere>
}
...