資訊專欄INFORMATION COLUMN
摘要：引入全面指南篇系列目錄引入全面指南引入全面指南篇前言正是我下決心引入的核心痛點。其中，可以通過建立輔助函數形式，簡單繞開。只是類型均為建議不使用，以明確指定類型及調用可通過上述下輔助函數，手動開啟類型推導及類型推導，暫時只能手動指定。
Vue2.5+ Typescript 引入全面指南 - Vuex篇
系列目錄：
Vue2.5+ Typescript 引入全面指南
Vue2.5+ Typescript 引入全面指南 - Vuex篇
前言Vuex 正是我下決心引入Typescript的核心痛點。與 vuex 相關的代碼中，到處充斥著此般寫法：
再加上vuex的 dispatch/commit 并非直接引用代碼，而是是通過一個string類型的 type 來標記，如此一來上圖中寫法，如果想查看 payload 的具體內容，甚至不能借助于編輯器的查找定義，只能手動去切代碼查看！簡直苦不堪言。
而借助于 typescript 的 interface 接口，至少可以簡化成如下效果：
這么寫一樣麻煩，不是還需要記類似PostLoginParams的Interface類型？這簡單，建個輔助函數就是：
編輯器里一個 Ctrl + 空格，payload里有哪些參數就全出來，再也不用去一遍遍翻代碼，效率直線提升！
現狀概述截至當前2017年11月，Vuex對Typescript的支持，仍十分薄弱，官方庫只是添加了一些.d.ts聲明文件，并沒有像vue 2.5這樣內置支持。
第三方衍生庫 vuex-typescript, vuex-ts-decorators, vuex-typex, vuex-class等等，我個人的總結，除了vuex-class外，基本都存在侵入性太強的問題，引用不算友好。而vuex-class提供的功能其實也是薄薄一層，并不能解決核心痛點。因此，需要手動添加輔助的地方，其實頗多。
核心痛點：每次調用 this.$store.dispatch / this.$store.commit / this.$store.state/ this.$store.getters 都會伴隨著類型丟失。
其中，dispatch/commit 可以通過建立輔助函數形式，簡單繞開。 state/getters 沒有太好辦法，只能手動指定，若覺得麻煩，可以全都指成 any，等官方支持。官方動態見此 issue
動手改造第一步：從 shopping-cart 示例搬運代碼以下示例基于 vuex 官方 examples 中最復雜的一個 shopping-cart，
改造后的完整代碼見 vue-vuex-typescript-demo
準備工作：
shopping-cart代碼復制至項目目錄下
.js文件統一重命名為.ts，
currency.js/api/shop.js/components/App.vue等外圍文件的ts改造
npm i -D vuex 添加依賴
詳細步驟這里略去，參照 代碼庫 即可
動手改造第二步：State改造用到state變量的地方實在太多，不僅store目錄下 action/getter/mutation 均有可能需要，甚至在 .vue 文件里，mapState也有引用，因此我個人總結的一套實踐：
store/modules下的每個子模塊，均維護自己名為 State 的 Interface 聲明
store/index.ts 文件中，匯總各子模塊，維護一個總的State聲明
store/modules 下文件舉例：
// ./src/store/modules/cart.ts
interface Shape {
id: number
quantity: number
}
export interface State {
added: Shape[]
checkoutStatus: "successful" | "failed" | null
}
// initial state
// shape: [{ id, quantity }]
const state: State = {
added: [],
checkoutStatus: null
}
// 需引用state的地方舉例：
const getters = {
checkoutStatus: (state: State) => state.checkoutStatus
}
store/index.ts 文件總 State 舉例：
// ./src/store/index.ts
import { State as CardState } from "./modules/cart"
import { State as ProductsState } from "./modules/products"
export interface State {
cart: CardState,
products: ProductsState
}
總 State 引用示例：
// ./src/store/getters.ts
import { State } from "./index"
const cartProducts: Getter = (state: State) => {
return state.cart.added.map(shape => {
// 此處shape自動推導出Shape類型
// ... 詳見源碼
})
}
如此，所有直接引用 state 的地方，均可啟用類型推導
動手改造之 MutationMutation 對應 store.commit 命令，常見寫法：
const mutations = {
[types.ADD_TO_CART] (state, { id }) {
// ...
}
}
state 上步已處理{ id }，payload 參數，即為開篇介紹類型缺失的重災區。
我的一套個人實踐：
store/modules 下的子模塊文件，為自己的mutations 維護 payload Interface聲明
子模塊共用 payload（多個模塊響應同一 commit 等），在 store/index.ts 中統一維護
新建文件 store/dispatches.ts 文件，為每一個直接調用的帶參commit維護輔助函數，以應用類型推導
子模塊 payload 聲明舉例：
// ./src/store/modules/products.ts
import { Product, AddToCartPayload } from "../index"
export interface ProductsPayload {
products: Product[]
}
const mutations = {
[types.RECEIVE_PRODUCTS] (state: State, payload: ProductsPayload) {
state.all = payload.products
},
[types.ADD_TO_CART] (state: State, payload: AddToCartPayload) {
const product = state.all.find(p => p.id === payload.id)
// ...
}
}
// mutations調用舉例：
const actions = {
getAllProducts (context: ActionContextBasic) {
shop.getProducts((products: Product[]) => {
const payload: ProductsPayload = {
products
}
context.commit(types.RECEIVE_PRODUCTS, payload)
})
}
}
store/index.ts文件公共 payload 聲明舉例：
// ./src/store/index.ts
export interface AddToCartPayload {
id: number
}
store/dispatches.ts文件，commit輔助函數，參見下步同文件dispatch輔助函數
動手改造之 ActionAction 對應 store.dispatch 命令，常見寫法：
const actions = {
checkout ({ commit, state }, products) {
// ...
}
}
其中第二個參數products，payload 參數，用法同上步 Mutation 的 payload 參數，不再贅述。
第一個參數{ commit, state }，context參數，vuex 的 d.ts 提供有類型 ActionContext，用法如下：
import { ActionContext } from "vuex"
const actions = {
checkout (context: ActionContext, products: CartProduct[]) {
context.commit(types.CHECKOUT_REQUEST)
// ...
}
}
ActionContext
個人更喜歡如下寫法：
const actions = {
checkout (context: { commit: Commit, state: State }, products: CartProduct[]) {
context.commit(types.CHECKOUT_REQUEST)
// ...
}
}
Action payload 改造參見步驟 Mutation，不再贅述。
store/dispatches.ts文件，dispatch輔助函數：
// ./src/store/dispatches.ts
import store, { CartProduct, Product } from "./index"
export const dispatchCheckout = (products: CartProduct[]) => {
return store.dispatch("checkout", products)
}
.vue文件調用舉例：
// ./src/components/Cart.vue
import { dispatchCheckout } from "../store/dispatches"
export default Vue.extend({
methods: {
checkout (products: CartProduct[]) {
// this.$store.dispatch 寫法可用，但不帶類型推導
// this.$store.dispatch("checkout", products)
dispatchCheckout(products) // 帶有類型智能提示
}
}
})
動手改造之 Getter
Getter常見寫法：
const getters = {
checkoutStatus: state => state.checkoutStatus
}
需要改的不多，state 加上聲明即可：
const getters = {
checkoutStatus: (state: State) => state.checkoutStatus
}
動手改造之獨立的 Mutations/Actions/Getters 文件
獨立文件常規寫法：
// ./src/store/getters.js
export const cartProducts = state => {
return state.cart.added.map(({ id, quantity }) => {
const product = state.products.all.find(p => p.id === id)
return {
title: product.title,
price: product.price,
quantity
}
})
}
引用：
// ./src/store/index.js
import * as getters from "./getters"
export default new Vuex.Store({
getters
})
typescript下均需改造：
// ./src/
import { GetterTree, Getter } from "vuex"
import { State } from "./index"
const cartProducts: Getter = (state: State) => {
return state.cart.added.map(shape => {
// ...
})
}
const getterTree: GetterTree = {
cartProducts
}
export default getterTree
Actions/Mutations 文件改造同上，類型換成 ActionTree, Action, MutationTree, Mutation即可
引用：
// ./src/store/index.js
import getters from "./getters"
export default new Vuex.Store({
getters
})
原因是vuex定義，new Vuex.Store參數類型 StoreOptions 如下：
