vue2 中 vuex 对 ts 的支持

对于 ts 项目来说，vue2 使用 vuex 是很难受的，无论怎么修改声明都不会有类型提示，这让 ts 的体验大打折扣。

常规做法，我们在 src 根目录下创建一个声明文件，然后填入：

import { Stroe } from 'vuex';

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

这并不生效，在页面中，$store 依旧是 any 类型，因为在 node_modules 的系统文件中也有一个这样的生命，它的类型是 any，而且我们无论怎么写，都不会替换掉它。

其实换个思路，我们自定义的属性都是通过这样的方式进行声明的。那么我们可以通过一个自定义变量来替换 $store 就好了嘛。

比如：

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

这样，我们就有了一个 $s 的变量声明，在 main.ts 中绑定它：

Vue.prototype.$s = store;

不用担心，这样的绑定和 this.$store 完全一样，它们是同一个对象。我们可以在 App.vue 中测试：

created() {
    console.log(this.$store === this.$s); // true
}

接下来只需要把我们项目中所有的 $store 替换成 $s 即可。

最后就是享受 ts 带来的便捷了~