Vue.js 3和typescript：类型'ComponentPublicInstance

问题描述

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

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

尽管按照Vue 3的说明进行操作，但似乎无法访问this。$ store。

src / components / FlashMessages.vue中的

ERROR：28：25 TS2339：类型'ComponentPublicInstance >'。

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

main.ts

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;
        },

init.ts

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。

client / 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"
  ]
}

解决方法

在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 support部分

,

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

db.execute("INSERT INTO solves (name,time) VALUES ('kyle','45')")

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

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

,

我做了与上述解决方案相同的事情，但此外，我为应用创建了一个 globalProperty。

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

const app = createApp(App);
app.config.globalProperties.$store = store;
app.use(router).mount('#app');