Vue.js / Veux: вызов getter против доступа к значению состояния непосредственно при создании ловушки жизненного цикла

Question

Я использую созданный хук жизненного цикла в vue.js для загрузки данных из моего хранилища в данные для компонента vue.Я заметил, что this.selectedType = store.state.selectedType успешно загружает данные из магазина.Однако, если я использую геттер для загрузки из магазина (то есть this.selectedType = store.getters.getType()), я получаю следующую ошибку:

Error in created hook: "TypeError: Cannot read property 'selectedType' of undefined"

Я не понимаю, почему это говорит о том, чтоselectedType не определен, потому что selectedType имеет значение "Item" в хранилище и правильно загружается при создании, если я использую this.selectedType = store.state.selectedType.

Получатель определяется так:

getters: {
    getSelectedType: state => {
      return state.selectedType
    }
}

А состояние определяется как:

state: {
  selectedType: "Item"
}

Может кто-нибудь объяснить, почему это происходит?Я догадываюсь, что в жизненных циклах есть что-то, что я не до конца понимаю, что приводит к этой путанице.

Спасибо!

Answer 1

Вы не должны вызывать добытчиков.Точно так же как вычисленные свойства, вы вместо этого пишете это, как будто вы читаете переменную.В фоновом режиме функция, которую вы определили в хранилище Vuex, вызывается с состоянием getters (и, возможно, rootState и rootGetters) и возвращает некоторое значение.

Кроме того, обычно использование анти-паттерна для использования жизненного циклакрючок для инициализации любой переменной.Локальные переменные «компонента» могут быть инициализированы в свойстве data компонента, в то время как такие вещи, как состояние vuex, обычно заканчиваются вычисляемым свойством.

Последнее, на что я хочу обратить внимание, это то, что еслиВы правильно добавили хранилище в свое приложение Vue. Вы можете получить доступ к хранилищу в любом компоненте с помощью this.$store.Чтобы использовать геттеры в вашем приложении, вы можете использовать помощник mapGetters для сопоставления геттеров со свойствами компонентов.Я бы рекомендовал использовать что-то вроде этого:

import { mapGetters } from 'vuex';

export default {
  // Omitted some things here

  computed: {
    ...mapGetters({
      selectedType: 'getSelectedType'
    })
  },

  methods: {
    doSomething () {
      console.log(this.selectedType);
    }
  }
}

Что функционально эквивалентно:

computed: {
  selectedType () {
    return this.$store.getters.getSelectedType;
  }
}