博客

解决Vue+ts里面this.$store问题

  • Post category:http

在Vue项目中，我们一般使用Vuex来做状态管理。在用TypeScript编写Vue项目时，$store对象的类型问题比较麻烦，经常会出现this.$store为undefined的情况。本文将提供两种解决方法。

方法一：this.$store的类型声明

在Vue+TS项目中，可以通过如下方式在Vue的接口声明文件中声明this.$store的类型：

import Vue from 'vue';
import { Store } from 'vuex';

declare module 'vue/types/vue' {
  interface Vue {
    $store: Store<any>;
  }
}

上面代码中，我们使用declare module为Vue添加类型声明，指定this.$store的类型为Vuex的Store。

至此，我们已经解决了this.$store为undefined的问题。

方法二：使用vuex-class库

除了手动声明this.$store的类型，我们也可以使用vuex-class库来简化操作。具体步骤如下：

  1. 安装vuex-class库
npm install vuex-class
  1. 使用装饰器获取$store对象

在需要使用$store的组件中，我们可以使用@State和@Action装饰器来获取$store对象和对应的actions。示例代码如下：

import { Component, Vue } from 'vue-property-decorator';
import { State, Action } from 'vuex-class';

@Component
export default class HelloWorld extends Vue {
  @State('count') count: number;
  @Action('increment') increment: Function;
}

上面代码中，我们使用@State装饰器获取$store对象中名为count的状态，使用@Action装饰器获取$store对象中名为increment的action。

至此，我们已经成功解决了this.$store为undefined的问题。

以上是两种解决Vue+TS里面this.$store问题的方法，希望能够对读者有所帮助。

Tags: