Vue.js 3 و TypeScript: ویژگی '$store' در نوع 'ComponentPublicInstance' وجود ندارد

نمیتوانم چیزی پیدا کنم تا این مشکل ظاهراً مشخص را حل کند.

بهتازگی از Vue 2 به Vue 3 و Vuex با Typescript ارتقا دادم.

به نظر میرسد این فروشگاه قابل دسترسی نیست، حتی با اینکه دستورالعملهای Vue 3 را دنبال کردهام.

خطا در src/components/FlashMessages.vue:28:25 TS2339: ویژگی '$store' در نوع 'ComponentPublicInstance<{}, {}, {}, { getAllFlashMessages(): Word; }, {}, EmitsOptions, {}, {}, false, ComponentOptionsBase<{}, {}, {}, { getAllFlashMessages(): Word; }, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, {}>>' وجود ندارد.

    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 استفاده میکنم، بنابراین مطمئن نیستم که آیا آن را به درستی تنظیم کردهام یا نه.. در نهایت من با یک tsconfig متفاوت در دایرکتوریهای /client و /server مواجه شدم.

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

برای اطلاعات بیشتر بخش پشتیبانی تایپاسکریپت را بررسی کنید

پاسخ شماره ۲

من یک خطای مشابه داشتم اما در VS Code. از نسخه ۴ Vuex، این روش ترجیح داده شده است:

// 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 را غیرفعال و سپس فعال کنم.