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

解决 Vue + TypeScript 中 this.$store 问题

在Vue + TypeScript中使用this.$store访问 Vuex store 中的状态或者调用 mutation/action 方法时，可能会遇到this.$store失效的问题。本文将介绍如何解决这个问题。

问题分析

在 Vue + TypeScript 中，类的方法默认使用严格模式，因此调用该类方法时， this 的值将会是 undefined，而不是组件实例，所以当我们从组件中访问 this.$store 的时候，会返回 undefined。

解决方案

为了解决 this.$store 失效的问题，我们需要在项目中添加一些类型声明和配置修改。

1. 在 vue.d.ts 中添加 $store 的类型声明

在 src 目录下创建一个 vue.d.ts 文件，并添加以下内容：

import { Store } from 'vuex';

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

该文件将会扩展 Vue 类型，并将 $store 定义为 Store 类型。这样一来，我们就能使用 this.$store 访问 Vuex 的 store。

1. 修改 tsconfig.json 文件

在 tsconfig.json 文件中添加 "noImplicitThis": false 选项，以去除 TypeScript 中的严格模式。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "strict": true,
    "noImplicitThis": false
  }
}

示例说明

1. 访问 Vuex store 中的状态

假设我们的 Vuex store 中有一个 count 状态，我们在组件中通过 this.$store 访问该状态，代码如下：

import { VuexModule, Module, Action, Mutation } from 'vuex-module-decorators';
import store from '@/store';

@Module({ dynamic: true, namespaced: true, store, name: 'counter' })
class Counter extends VuexModule {
  count = 0;

  @Mutation
  increment(delta: number) {
    this.count += delta;
  }

  @Mutation
  decrement(delta: number) {
    this.count -= delta;
  }

  @Action
  async incrementAsync(delta: number) {
    return new Promise((resolve) => {
      setTimeout(() => {
        this.increment(delta);
        resolve();
      }, 1000);
    });
  }

  @Action
  decrementAsync(delta: number) {
    return new Promise((resolve) => {
      setTimeout(() => {
        this.decrement(delta);
        resolve();
      }, 1000);
    });
  }
}

export default Counter;

发现 VS Code 编辑器报错，提示 TS2339: Property 'count' does not exist on type 'undefined'。这是因为在此处的 this 指向的是类内部，不是指向组件实例。为了解决该问题，添加 vue.d.ts 文件并在 tsconfig.json 文件中添加"noImplicitThis": false 选项，即可解决此问题。

1. 调用 Vuex store 中的 mutation 方法

现在我们来看一个组件中调用 Vuex store 中的 mutation 方法的示例：

import { Component, Vue } from 'vue-property-decorator';

@Component
export default class CounterComponent extends Vue {
  get count() {
    return this.$store.state.counter.count;
  }

  increment() {
    this.$store.commit('counter/increment', 1);
  }

  decrement() {
    this.$store.commit('counter/decrement', 1);
  }
}

在此代码中，当调用 this.$store.commit 方法时，this 的值指向的是 undefined，为了解决该问题，同样需要添加 vue.d.ts 文件并在 tsconfig.json 文件中添加"noImplicitThis": false 选项，即可解决此问题。