vuex@4 + TypeScript

背景

我在使用vite 配置一个vue3的项目，遇到了这个vuex@4 + TypeScript怎么去写这个代码的问题，下面记录下来，跟之前使用vue2还是有很多区别的

步骤

0. 安装

npm i vuex@next --save

1. Vue 组件中 $store 属性的类型声明

Vuex 没有为 this.$store 属性提供开箱即用的类型声明

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

declare module '@vue/runtime-core' {
  // 声明自己的 store state
  interface State {
    count: number
  }

  // 为 `this.$store` 提供类型声明
  interface ComponentCustomProperties {
    $store: Store<State>
  }
}

2. store/index.ts

为了 useStore 能正确返回类型化的 store，必须执行以下步骤：

定义类型化的 InjectionKey。
将 store 安装到 Vue 应用时提供类型化的 InjectionKey 。
将类型化的 InjectionKey 传给 useStore 方法。

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

// 为 store state 声明类型
export interface State {
  count: number
}

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

export const store = createStore<State>({
  state: {
    count: 0
  },
  getters: {
    getCount (state) {
        return state.count
    }
  }
})

3. main.ts

将 store 安装到 Vue 应用时传入定义好的 injection ke

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

const app = createApp({ ... })

// 传入 injection key
app.use(store, key)

app.mount('#app')

App.vue

将上述 injection key 传入 useStore 方法可以获取类型化的 store

// vue 组件
import { useStore } from 'vuex'
import { key } from './store'

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

    store.getters.getCount // 类型为 number
  }
}

完成

简化一下

store/index.ts

定义自己的 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
  }
})

// 定义自己的 `useStore` 组合式函数
export function useStore () {
  return baseUseStore(key)
}

App.vue

// vue 组件
import { useStore } from './store'

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

    store.state.count // 类型为 number
  }
}

最终这就是vuex@4 + typescript 的使用方法