# Vuex Typescript

本文讨论Typescript环境下的Vuex问题。

已知使用过的方案

• vuex-class

未使用过的方案

• vuex-typescript

• vuex-module-decorators

• vuex-typex

# vuex-class

官方方案，通过装饰器完成。

在Class Component中使用@State, @Action, @Mutation, @Watch实现功能和绑定。

缺点在于使用被装饰的属性名称是无类型提示的，完全靠复制粘贴，如果拼写出现错误或者上层Store改变，该方案将直接抛出错误。

优势在于非常无痛，不需要对Store进行额外的修改。

劣势就如同上述，没有完整的提示（包括返回值）都需要手动定义类型。

# vuex-typescript

很久没更新。

原理是将原来的store中的类型，通过export const的方式二次导出，使用getStoreAccessors并传入泛型来获取类型名称。

劣势是在每一个操作后都需要手动export带类型的方法，略显麻烦。

# vuex-module-decorators

这个和vuex-class相同，但是语法更加复杂一些。

# vuex-typex

与vuex-typescript原理类似，但是不需要手动传入命名空间名称，Promise返回值不是any。但是需要更多的操作和类型提示。

# Misc

FYI：https://github.com/vuejs/vuex/issues/564 本质上如果不使用modules特性，原生Typescript已经做的很好。但是modules基本没有解决方案。