Vue.js 3 和打字稿：类型“ComponentPublicInstance”上不存在属性“$store”

Question

找不到任何东西来解决这个看似明显的问题。

刚刚使用 Typescript 从 Vue 2 升级到 Vue 3 和 Vuex。

尽管遵循 Vue 3 说明，但 this.$store 似乎无法访问。

src/components/FlashMessages.vue:28:25 TS2339 中的错误：属性 '$store' 不存在于类型 'ComponentPublicInstance<{}, {}, {}, { getAllFlashMessages(): Word; }, {}, EmitsOptions, {}, {}, false, ComponentOptionsBase<{}, {}, {}, { getAllFlashMessages(): Word; }、{}、ComponentOptionsMixin、ComponentOptionsMixin、EmitsOptions、字符串、{}>>'。

    26 |     computed: {
    27 |         getAllFlashMessages (): FlashType {
  > 28 |             return this.$store.getters.getFlashMessages;
       |                         ^^^^^^
    29 |         },
    30 |     },
    31 | 

主文件

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import './assets/styles/index.css'

const app = createApp(App)

app.use(store)
app.use(router)
app.mount('#app')

store.ts

import { createStore } from 'vuex'
import FlashType from '@/init'

export default createStore({
    state: {
        flashMessages: [] as FlashType[],
    },

    getters: {
        getFlashMessages (state) {
            return state.flashMessages
        }
    },

FlashMessages.vue

<script lang="ts">
import { defineComponent } from "vue";
import FlashType from "@/init";

export default defineComponent({
    name: "FlashMessages",

    data () {
        return {};
    },

    computed: {
        getAllFlashMessages (): FlashType {
            return this.$store.getters.getFlashMessages;
        },
    },

初始化文件

export type FlashType = {
    kind: 'success' | 'error';
    message: string;
    time: number;
}

任何智慧赞赏:)

文件结构

??? .editorconfig
??? client
?   ??? babel.config.js
?   ??? CONTRACTS.md
?   ??? cypress.json
?   ??? jest.config.js
?   ??? package.json
?   ??? package-lock.json
?   ??? postcss.config.js
?   ??? public
?   ?   ??? favicon.ico
?   ?   ??? index.html
?   ?   ??? robots.txt
?   ??? README.md
?   ??? src
?   ?   ??? App.vue
?   ?   ??? assets
?   ?   ?   ??? logo.png
?   ?   ?   ??? styles
?   ?   ?       ??? index.css
?   ?   ??? components
?   ?   ?   ??? admin
?   ?   ?   ?   ??? AdminAdd.vue
?   ?   ?   ?   ??? AdminList.vue
?   ?   ?   ?   ??? AdminWord.vue
?   ?   ?   ?   ??? EmotionAdd.vue
?   ?   ?   ?   ??? EmotionsList.vue
?   ?   ?   ?   ??? Emotion.vue
?   ?   ?   ??? FlashMessages.vue
?   ?   ??? init.ts
?   ?   ??? main.ts
?   ?   ??? registerServiceWorker.ts
?   ?   ??? router
?   ?   ?   ??? index.ts
?   ?   ??? shims-vue.d.ts
?   ?   ??? store
?   ?   ?   ??? index.ts
?   ?   ??? views
?   ?       ??? About.vue
?   ?       ??? Admin.vue
?   ?       ??? Emotions.vue
?   ?       ??? Home.vue
?   ??? tsconfig.json
?   ??? vue.config.js
?
??? server
    ??? api
    ??? api.bundle.js
    ??? index.ts
    ??? logger
    ?   ??? logger.ts
    ??? models
    ??? nodemon.json
    ??? package.json
    ??? package-lock.json
    ??? router
    ?   ??? db.ts
    ?   ??? emotions.ts
    ??? tsconfig.json
    ??? webpack.config.js

这是我第一次正确使用 eslint，所以我不确定我是否正确设置了它。我最终在 /client 和 /server 目录中使用了不同的 tsconfig。

客户端/tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": "./",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Answer 1

在shims-vue.d.ts文件旁边创建另一个文件shims-vuex.d.ts，其内容如下：

import { Store } from '@/store';// path to store file

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

有关更多详细信息，请查看Typescript 支持部分

Answer 2

我有一个类似的错误，但在 VS Code 中。从 Vuex 4 开始，这是首选方法：

// vuex-shim.d.ts

import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'

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

  interface ComponentCustomProperties {
    $store: Store<State>
  }
}

文档：https : //next.vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html#typescript-support

我不得不禁用然后再次启用 Vetur。