Vuex Store类型定义扩展/覆盖：TypeScript强类型适配技术问询

我帮你搞定这个Vuex + TypeScript强类型Store的问题，之前你遇到的“后续定义必须具有相同类型”错误，主要是因为没找对正确的全局类型扩展方式。下面一步步来实现完全强类型的Store：

首先在你的store入口文件（比如src/store/index.ts）里，明确声明RootState、Mutations、Actions的类型，然后基于Vuex的Store类型创建自定义的强类型Store：

import { createStore, Store as VuexStore, CommitOptions, DispatchOptions } from 'vuex'

// 1. 定义全局RootState的类型
export interface RootState {
  count: number
  userInfo: {
    name: string
    id: number
  }
}

// 2. 定义Mutations的类型（可选但推荐，让commit也有强类型提示）
interface Mutations {
  increment(state: RootState, payload: number): void
  setUserInfo(state: RootState, payload: RootState['userInfo']): void
}

// 3. 定义Actions的类型（可选但推荐，让dispatch也有强类型提示）
interface Actions {
  fetchUserInfo(context: { commit: Store['commit'] }, userId: number): Promise<void>
}

// 4. 创建自定义Store类型，覆盖默认的any类型
export type Store = Omit<VuexStore<RootState>, 'commit' | 'dispatch'> & {
  commit<K extends keyof Mutations>(
    key: K,
    payload: Parameters<Mutations[K]>[1],
    options?: CommitOptions
  ): ReturnType<Mutations[K]>
} & {
  dispatch<K extends keyof Actions>(
    key: K,
    payload?: Parameters<Actions[K]>[1],
    options?: DispatchOptions
  ): ReturnType<Actions[K]>
}

// 5. 创建Store实例，传入RootState类型
const store = createStore<RootState>({
  state: {
    count: 0,
    userInfo: { name: '', id: 0 }
  },
  mutations: {
    increment(state, payload) {
      state.count += payload
    },
    setUserInfo(state, payload) {
      state.userInfo = payload
    }
  },
  actions: {
    async fetchUserInfo({ commit }, userId) {
      // 模拟接口请求
      const user = await Promise.resolve({ name: 'John', id: userId })
      commit('setUserInfo', user)
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2
  }
})

export default store

之前的错误是因为直接修改默认Store类型导致冲突，正确的做法是扩展Vue的全局组件属性，让this.$store自动指向我们的强类型Store。

根据你的Vue版本创建对应的类型声明文件（比如src/store.d.ts）：

如果你用Vue3： #

import { ComponentCustomProperties } from '@vue/runtime-core'
import { Store } from './store'

// 扩展Vue的全局组件属性，替换$store的类型
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $store: Store
  }
}

如果你用Vue2： #

import Vue from 'vue'
import { Store } from './store'

// 扩展Vue实例的$store类型
declare module 'vue/types/vue' {
  interface Vue {
    $store: Store
  }
}

// 扩展组件选项里的store类型
declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    store?: Store
  }
}

现在在组件里使用this.$store时，TypeScript会自动提供强类型提示，再也不会是any了：

import { defineComponent } from 'vue'

export default defineComponent({
  mounted() {
    // state有明确的类型提示，count是number，不是any
    console.log(this.$store.state.count)
    
    // commit时会检查payload类型，传字符串会直接报错
    this.$store.commit('increment', 5)
    
    // dispatch同样有类型提示，userId必须是number
    this.$store.dispatch('fetchUserInfo', 123)
    
    // getters也会自动推导类型，doubleCount是number
    console.log(this.$store.getters.doubleCount)
  }
})

• 确保你的tsconfig.json里的include字段包含了所有.d.ts文件，比如：

  {
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
  }
  

• 不要直接修改Vuex的默认Store类型，而是通过扩展Vue的全局属性来替换，这样就不会触发“后续定义必须具有相同类型”的错误。

内容的提问来源于stack exchange，提问作者padigan