Тип магазина Vuex с Typescript

Question

Я пытаюсь заставить магазин Vuex быть дружественным к Typescript. Я строю магазин, как объяснено здесь . Однако, когда я получаю доступ к this.$store из компонента, тип Store<any>.

Я не мог понять, как изменить его так, чтобы оно по умолчанию было Store<MyState>, не требуя приведения каждый раз.

Answer 1

Вы можете объявить свойство в вашем компоненте, чтобы машинопись применяла печатание. Я использую это для $refs все время, но оно работает и для $store. Вам не нужно ничего делать со свойством, кроме пометки! оператор, чтобы сообщить транспилеру, что vue установит переменную для вас.

$store!: Store<StoreStateType>;

Другой альтернативой, которую я использую, является использование помощников компонента MapState или MapGetters . Они создают свойства для вас, чтобы вы могли использовать их в шаблоне. Пример:

@Component({
  computed: mapState({
    userFullName: (state: any) => state.user.fullName,
    userEmail: (state: any) => state.user.email
  })
})

Не забудьте импортировать Store, ваш класс состояния vuex и любого помощника, которого вы используете import { Store, mapState } from "vuex";.