Vue.js 3 및 typescript : 속성 '$store'가 유형 'ComponentPublicInstance'에 없습니다.

Vue.js 3 및 typescript : 속성 '$store'가 유형 'ComponentPublicInstance'에 없습니다.

명백해 보이는 이 문제를 해결할 수 있는 것을 찾을 수 없다.

방금 Vue 2에서 Vue 3 및 Vuex(타입 스크립트 포함)로 업그레이드했습니다.

이.$store는 Vue 3의 지시에 따라도 액세스 할 수 없는 것 같습니다.

src/컴포넌트/Flash Messages 오류입니다.vue:28:25 TS2339: 유형 'ComponentPublicInstance'에 속성 '$store'가 없습니다. {}, {}, {getAllFlashMessages(): Word; {}, {}, {}, {}, ExcuresOptions, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},

    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')

스토어.ts

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

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

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

플래시 메시지표시하다

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

옆에shims-vue.d.tsfile이라는 다른 파일 생성shims-vuex.d.ts다음 내용이 포함되어 있습니다.

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

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

자세한 내용은 Typescript 지원 섹션을 참조하십시오.

비슷한 오류가 발생했지만 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를 비활성화했다가 다시 활성화해야 했습니다.

추가해 보다

app.provide("$store", store);

당신의 안에서main.ts설치 전에 파일링하십시오.이 방법은 내 쪽에서 작동하며 최종 코드는 다음과 같습니다.

...
let app = createApp(App);
app.provide("$store", store);
app.use(store);
app.mount("#app");

위의 솔루션과 동일한 작업을 수행했지만, 추가로 앱용 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');

vue-class-component 및/또는 vue-property-decorator를 통해 VS Code 및 Vue를 TypeScript와 함께 사용하는 경우 유형 선언을 추가할 필요가 없습니다.이 문제는 로 해결할 수 있습니다.즉,include소유물.

누락된 것을 알게 될 것이다.this.$store이 오류가 발생하고 있는 파일이 globs 목록에 없는 경우 정의 오류가 발생합니다.include소유물.

코드를 아래에 참고를 누락한다.tests/....에서 곱빼기include오류를 파일 이 곱빼기 matcing에 출연할 것이다 Array.만약 너가 한 추가하는 오류가 사라질 것 같다.

   "include": ["src/**/*.ts", "src/**/*.vue", "tests/e2e/.fixtures/**/*.ts"]

내가 문제와 옵션 타이프 라이터 인쇄물 API와 vuex를 구성하려고 애쓰는 많았다.에 상관 없이 API를 사용하던지, 나는 그것이 타이프 라이터 인쇄물 준비 해결책과 매우 Vuex과 비슷하다 너 Pinia을 사용할 것 강력히 권합니다.

Vuex는 이것에 대한 오타를 제공하지 않습니다.$store 속성을 바로 사용할 수 있습니다.TypeScript와 함께 사용하는 경우 자체 모듈 증강을 선언해야 합니다.레퍼런스

언급URL : https://stackoverflow.com/questions/64412243/vue-js-3-and-typescript-property-store-does-not-exist-on-type-componentpub