Vue3+TypeScript项目中Vuex类型声明引发createStore报错求助

1. 确认Vuex版本适配Vue3 #

Vue3必须搭配Vuex 4.x版本，Vuex 3.x是为Vue2设计的，不存在createStore导出项。

• 查看package.json中的vuex版本，若低于4.0.0，执行升级命令：

  npm install vuex@4 --save
  # 或使用yarn
  yarn add vuex@4
  

2. 规范自定义类型声明文件 #

你的vuex.d.ts仅需扩展Vue组件的自定义属性，不要覆盖Vuex本身的模块声明，保持文件内容如下（与你原代码一致，确保放在正确目录）：

import { Store } from 'vuex';
import { State } from '@/store';

declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $store: Store<State>
    }
}

• 该文件需放在src目录下（或src/types等子目录），确保TypeScript能通过配置识别到。

3. 配置tsconfig.json #

确保tsconfig.json的include数组包含你的类型声明文件：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    // 其他项目配置...
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "exclude": ["node_modules"]
}

4. 清除IDE缓存 #

PhpStorm的缓存可能导致类型识别异常，执行：

• 点击菜单栏 File > Invalidate Caches...
• 勾选"Clear file system cache and local history"，点击"Invalidate and Restart"

完成以上步骤后，createStore的错误会消失，同时组件中可正常访问$store并获得正确的类型提示。

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