Поддержка TypeScript

Vuex предоставляет типизации, позволяющие использовать TypeScript для определения хранилища. Вам не нужна специальная настройка TypeScript для Vuex. Следуйте базовой настройке TypeScript в Vue для настройки вашего проекта.

Однако, если вы пишете свои компоненты Vue на TypeScript, необходимо выполнить несколько шагов, чтобы правильно предоставить типизацию для хранилища.

Типизация свойства $store в компоненте Vue

Vuex не предоставляет типизацию для свойства this.$store по умолчанию. При использовании с TypeScript необходимо объявить расширение модуля самостоятельно.

Для этого, объявите пользовательские типизации для ComponentCustomProperties добавив файл объявления в папку проекта:

// vuex.d.ts
import { Store } from 'vuex'

declare module '@vue/runtime-core' {
  // declare your own store states
  interface State {
    count: number
  }

  // provide typings for `this.$store`
  interface ComponentCustomProperties {
    $store: Store<State>
  }
}

Типизация функции useStore

При написании компонента Vue с помощью Composition API, вы, скорее всего, захотите, чтобы useStore возвращало типизированное хранилище. Для того, чтобы useStore корректно возвращало типизированное хранилище, необходимо:

1. Определить типизированный InjectionKey.
2. Предоставить типизированный InjectionKey при установке хранилища в приложение Vue.
3. Передать типизированный InjectionKey в метод useStore.

Давайте разберемся с этим пошагово. Сначала определите ключ с помощью интерфейса InjectionKey Vue и вашего собственного определения типизации хранилища:

// store.ts
import { InjectionKey } from 'vue'
import { createStore, Store } from 'vuex'

// define your typings for the store state
export interface State {
  count: number
}

// define injection key
export const key: InjectionKey<Store<State>> = Symbol()

export const store = createStore<State>({
  state: {
    count: 0
  }
})

Далее, передайте определенный ключ ввода при установке хранилища в приложение Vue:

// main.ts
import { createApp } from 'vue'
import { store, key } from './store'

const app = createApp({ ... })

// pass the injection key
app.use(store, key)

app.mount('#app')

Наконец, вы можете передать ключ в метод useStore для получения типизированного хранилища.

// in a vue component
import { useStore } from 'vuex'
import { key } from './store'

export default {
  setup () {
    const store = useStore(key)

    store.state.count // typed as number
  }
}

Под капотом, Vuex устанавливает хранилище в приложение Vue с помощью функции Provide/Inject Vue, поэтому ключ ввода является важным фактором.

Упрощение использования useStore

Необходимость импорта InjectionKey и передачи его в useStore повсюду может быстро стать повторяющейся задачей. Чтобы упростить задачу, вы можете определить собственную функцию композиции для получения типизированного хранилища:

// store.ts
import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'

export interface State {
  count: number
}

export const key: InjectionKey<Store<State>> = Symbol()

export const store = createStore<State>({
  state: {
    count: 0
  }
})

// define your own `useStore` composition function
export function useStore () {
  return baseUseStore(key)
}

Теперь, импортировав свою собственную функцию композиции, вы можете получить типизированное хранилище без необходимости предоставления ключа ввода и его типизации:

// in a vue component
import { useStore } from './store'

export default {
  setup () {
    const store = useStore()

    store.state.count // typed as number
  }
}