Ionic with vuex 给出编译错误（ 属性 '$store' does not exist on type ）

Question

我想尝试在 Ionic 项目上使用 vuex，所以我刚刚使用 cli 创建了一个新项目并添加了 vuex 和一个简单的商店。我正在使用 typescript，当我尝试在我的组件中使用 this.$store 时出现编译错误。我已经为商店添加了一个定义文件：

// vuex.d.ts
import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'

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

  // provide typings for `this.$store`
  interface ComponentCustomProperties {
    $store: Store<State>;
  }
}

而 vs-code 似乎正在阅读它，因为它提供了智能感知或它。 chrome 控制台记录了我能看到的内容。但它看起来不像编译器读取定义文件，因为它在浏览器中显示以下错误。

Failed to compile.

src/views/Tab1.vue:28:22 TS2339: Property '$store' does not exist on type '{ name: string; components: { ExploreContainer: { name: >string; props: { name: StringConstructor; }; }; IonHeader: DefineComponent<IonHeader & InputProps, >object, ... 9 more ..., {}>; IonToolbar: DefineComponent<...>; IonTitle: DefineComponent<...>; >IonContent: DefineComponent<...>; IonPage: DefineComponent<...>; };...'. 26 | components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }, 27 | mounted() {

28 | console.log(this.$store); | ^^^^^^ 29 | } 30 | } 31 |

您可以浏览此存储库中的代码：https://github.com/kebarvid/notifier

Answer 1

为了让它为你工作，你需要命名 vuex 声明文件 shims-vuex.d.ts 并在其中导入你的商店实例：

import { ComponentCustomProperties } from 'vue'

import store from '@/store'

  interface State {
    count: number;
  }

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

Answer 2

自己找到了答案。

我没有将我的组件包装在 defineComponent 函数中，如果我将 Tab1.bue 中的脚本部分从

更改

<script lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import ExploreContainer from '@/components/ExploreContainer.vue';

export default {
  name: 'Tab1',
  components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage },
  mounted() {
    console.log(this.$store);
  }
}
</script>

以下

<script lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import ExploreContainer from '@/components/ExploreContainer.vue';
import { defineComponent } from 'vue';

export default defineComponent( {
  name: 'Tab1',
  components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage },
  mounted() {
    console.log(this.$store);
  }
})
</script>

我没有得到编译错误。有点奇怪的是，当您使用 CLI 创建新应用程序时，默认情况下不会这样做，因为 ionic 希望您使用 TypeScript。