45

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

刚刚从 Vue 2 升级到 Vue 3 和带有 Typescript 的 Vuex。

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

src/components/FlashMessages.vue:28:25 TS2339 中的错误：类型“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 |

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

初始化.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。

客户端/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"
  ]
}
4

7 回答 7

62

在文件旁边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 支持部分以获取更多详细信息

于 2020-10-18T13:52:27.113 回答
13

我有一个类似的错误，但在 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。

于 2021-03-03T22:48:52.613 回答
2

尝试添加

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

在安装之前在您的main.ts文件中。这种方法适用于我，最终代码看起来像

...
let app = createApp(App);
app.provide("$store", store);
app.use(store);
app.mount("#app");
于 2021-08-25T05:01:57.100 回答
0

我做了与上述解决方案相同的事情，但此外，我为应用程序创建了一个 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');
于 2021-05-29T01:20:04.420 回答
0

对于那些通过vue-class-component和/或vue-property-decorator使用 VS Code 和 Vue 和 TypeScript 的人，可能不需要添加更多类型声明。这个问题可以用tsconfig.json. 即以其include属性。

this.$store如果您看到此错误的文件不在include属性的 glob 列表中，您将看到缺少定义错误。

请注意，如果您从数组中省略tests/....glob，则在下面的代码中include，错误将出现在与此 glob 匹配的文件中。如果您将 glob 添加回来，错误将消失。

   "include": ["src/**/*.ts", "src/**/*.vue", "tests/e2e/.fixtures/**/*.ts"]
于 2022-02-03T12:45:15.980 回答
0

我在尝试使用 typescript 和 options API 配置 vuex 时遇到了很多问题。无论您使用哪种 API，我都强烈建议您使用 Pinia，因为它是一个 typescript 就绪的解决方案，并且与 Vuex 非常相似

于 2022-02-09T20:05:21.660 回答
-1

Vuex 没有为 this.$store 属性提供开箱即用的类型。与 TypeScript 一起使用时，您必须声明自己的模块扩充。 参考

于 2021-12-11T11:35:22.027 回答