Vue2.5+ Typescript 引入全面指南 - Vuex篇

李纹
• 阅读 59898

Vue2.5+ Typescript 引入全面指南 - Vuex篇

系列目录:

前言

Vuex 正是我下决心引入Typescript的核心痛点。与 vuex 相关的代码中,到处充斥着此般写法:

Vue2.5+ Typescript 引入全面指南 - Vuex篇

再加上vuex的 dispatch/commit 并非直接引用代码,而是是通过一个string类型的 type 来标记,如此一来上图中写法,如果想查看 payload 的具体内容,甚至不能借助于编辑器的查找定义,只能手动去切代码查看!简直苦不堪言。

而借助于 typescriptinterface 接口,至少可以简化成如下效果:

Vue2.5+ Typescript 引入全面指南 - Vuex篇

这么写一样麻烦,不是还需要记类似PostLoginParams的Interface类型?这简单,建个辅助函数就是:

Vue2.5+ Typescript 引入全面指南 - Vuex篇

编辑器里一个 Ctrl + 空格payload里有哪些参数就全出来,再也不用去一遍遍翻代码,效率直线提升!

Vue2.5+ Typescript 引入全面指南 - Vuex篇

现状概述

截至当前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, any> = (state: State) => {
  return state.cart.added.map(shape => {
    // 此处shape自动推导出Shape类型
    // ... 详见源码
  })
}

如此,所有直接引用 state 的地方,均可启用类型推导

动手改造之 Mutation

Mutation 对应 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辅助函数

动手改造之 Action

Action 对应 store.dispatch 命令,常见写法:

const actions = {
  checkout ({ commit, state }, products) {
    // ...
  }
}

其中第二个参数productspayload 参数,用法同上步 Mutationpayload 参数,不再赘述。

第一个参数{ commit, state }context参数,vuexd.ts 提供有类型 ActionContext,用法如下:

import { ActionContext } from 'vuex'
const actions = {
  checkout (context: ActionContext<State, any>, products: CartProduct[]) {
    context.commit(types.CHECKOUT_REQUEST)
    // ...
  }
}

ActionContext<State, RootState> 传入两个大部分Action根本用不到的参数,才能得到需要的dispatch, commit,在我看来,难用至极。

个人更喜欢如下写法:

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, any> = (state: State) => {
  return state.cart.added.map(shape => {
    // ...
  })
}

const getterTree: GetterTree<State, any> = {
  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 如下:

export interface StoreOptions<S> {
  state?: S;
  getters?: GetterTree<S, S>;
  actions?: ActionTree<S, S>;
  mutations?: MutationTree<S>;
  modules?: ModuleTree<S>;
  plugins?: Plugin<S>[];
  strict?: boolean;
}

于是,独立Gettes/Actions/Mutations文件,export 必须是GetterTree/ActionTree/MutationTree类型

动手改造之 .vue 文件调用

  • 传统写法全部兼容,只需 mapState为state添加类型 (state: State) => state.balabal 等很少改动即可正常运行。只是类型均为 any
  • 建议不使用 mapState / mapGetters / mapActions / mapMutations,以明确指定类型
  • dispatchcommit 调用可通过上述 store/dispatches.ts 下辅助函数,手动开启类型推导
  • stategetters 类型推导,暂时只能手动指定。自动推导,估计得等官方内置支持了。

完整调用示例:

// ./src/components/ProductList.vue

import Vue from 'vue'
// import { mapGetters, mapActions } from 'vuex'
import { Product } from '../store'
import { dispatchAddToCart } from '../store/dispatches'

export default Vue.extend({
  computed: {
    // ...mapGetters({
    //   products: 'allProducts'
    // })
    products (): Product[] {
      return this.$store.getters.allProducts
    }
  },
  methods: {
    // ...mapActions([
    //   'addToCart'
    // ])
    addToCart (p: Product) {
      dispatchAddToCart(p)
    }
  },
  created () {
    this.$store.dispatch('getAllProducts')
  }
})

vue-class-component + vuex-class 组件式写法

如果觉得以上废弃 mapState / mapGetters 后的写法繁琐,可引入vue-class-component + vuex-class,开启组件式写法

  • vue-class-component,vue官方维护,学习成本低
  • vuex-class,作者 ktsn,vuex及vue-class-component贡献排第二(第一尤雨溪了)的活跃开发者,质量还是有保障的

引入这俩依赖后,须在 tsconfig.json 添加配置:

{
  "compilerOptions": {
    // 启用 vue-class-component 及 vuex-class 需要开启此选项
    "experimentalDecorators": true,

    // 启用 vuex-class 需要开启此选项
    "strictFunctionTypes": false
  }
}

Component 写法示例:

import Vue from 'vue'
import { Product } from '../store'
// import { dispatchAddToCart } from '../store/dispatches'
import Component from 'vue-class-component'
import { Getter, Action } from 'vuex-class'

@Component
export default class Cart extends Vue {
  @Getter('cartProducts') products: CartProduct[]
  @Getter('checkoutStatus') checkoutStatus: CheckoutStatus
  @Action('checkout') actionCheckout: Function

  get total (): number {
    return this.products.reduce((total, p) => {
      return total + p.price * p.quantity
    }, 0)
  }

  checkout (products: CartProduct[]) {
    // dispatchCheckout(products)
    this.actionCheckout(products)
  }
}

总结

在现阶段 vuex 官方未改进 typescript 支持下,用 typescript 写 vuex 代码,的确有些繁琐,而且支持也称不上全面,不过,总比没有强。哪怕都用 any,也能借助智能提示减轻一些代码翻来翻去的痛苦。

至于再进一步更完美的支持,等官方更新吧。

完整代码

见 Github 库:vue-vuex-typescript-demo

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(