Vue 2.7升级后Vuex store报No overload matches this call错误

问题根因 #

Vue 2.7 重构了内置TypeScript类型定义，类型声明路径与Vue 2.6及更早版本不兼容。3.x版本Vuex的类型注入逻辑是针对旧版Vue设计的，通过补充旧版Vue的类型接口实现store构造选项、this.$store实例属性的类型识别，升级到Vue 2.7后这套注入逻辑失效，TS无法识别Vue实例初始化参数中的store字段，就会抛出对应重载匹配错误。

该错误是纯类型校验错误，不会影响运行时逻辑，补全类型后即可正常编译运行。

修复步骤 #

• 清理冲突依赖
  卸载项目中已安装的@vue/composition-api，Vue 2.7已内置组合式API，保留该包会引发类型冲突；卸载误装的@vue/runtime-core、@vue/runtime-dom等Vue3专属类型依赖，避免和Vue2.7内置类型冲突；最后将Vuex升级到3.x最新稳定版，执行命令npm install vuex@3.6.2（使用yarn/pnpm的话替换为对应安装命令即可）。
• 补全缺失的类型声明
  找到项目中的全局类型声明文件（通常路径为src/shims-vue.d.ts，没有该文件的话可以新建src/global.d.ts），在文件中添加如下代码：

  import { Store } from 'vuex'
  import VueRouter from 'vue-router'
  
  declare module 'vue' {
    // 补全Vue构造选项的类型定义
    interface ComponentCustomOptions {
      store?: Store<any>
      router?: VueRouter
    }
    // 补全组件实例上的全局属性类型，避免组件内this.$store/this.$router报类型错
    interface ComponentCustomProperties {
      $store: Store<any>
      $router: VueRouter
      $route: VueRouter['currentRoute']
    }
  }
  
  export {}
  

• 重启IDE或者TS语言服务，原有初始化代码不需要做任何改动即可通过TS校验。

验证 #

修复完成后，原有Vue实例初始化代码可以直接正常运行，不需要修改：

new Vue({
    router,
    store,
    render: (h) => h(App),
}).$mount('#app');

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