抛弃vuex ，拥抱ts，手撸泛型Store<T>！

前段时间学习了下vue3 和ts ，就尝试下做了个项目，结果发现vuex和ts几乎无法结合，越写越别扭，开始怀疑用ts就是自己给自己挖坑，然后加了几个vue相关的群，去抱怨了几句，得到大佬指点：你可以不用vuex！

对，我可以不用vuex，然后尝试实现了一个自己的store ，本人虽然前端是个小白，但c#还是写了五六年，对泛型还是比较熟悉的，写完之后对ts大爱。不多说了 上代码：

 Store基类代码如下  ：

base-store.ts  

import BaseEntity from '@/entities/base-entity'
import PageResult from '@/entities/page-result'
import { readonly } from '@vue/reactivity'

export default abstract class BaseStore<T extends BaseEntity> {
  protected url = ''
  protected _all: T[] = []
  public get all() {
    return readonly(this._all)
  }

  protected _list: T[] = []
  public get list() {
    return readonly(this._list)
  }

  protected _editItem: T | undefined
  public get editItem() {
    return this._editItem
  }
  public set editItem(val: T | undefined) {
    this._editItem = val
  }

  protected _currentPage = 1
  public get currentPage() {
    return this._currentPage
  }
  public set currentPage(val) {
    this._currentPage = val
  }

  protected _pageSize = 30
  public get pageSize() {
    return this._pageSize
  }
  public set pageSize(val) {
    this._pageSize = val
  }

  protected _totalCount = 0
  public get totalCount() {
    return this._totalCount
  }

  protected _loading = false
  public get loading() {
    return this._loading
  }

  async getAll() {
    const response = await window.ajax.get(`/api/admin/${this.url}/getall`)
    this._all = response.data
  }
  async get(query: any) {
    this._loading = true
    const response = await window.ajax.get(`/api/admin/${this.url}`, { params: query })
    this._loading = false
    const page = response.data as PageResult<T>
    this._totalCount = page.totalCount
    this._list = page.items
  }
  async getById(id: string | number) {
    const response = await window.ajax.get(`/api/admin/${this.url}/${id}`)
    return response.data
  }
  async create(payload: T) {
    await window.ajax.post(`/api/admin/${this.url}`, payload)
  }
  async update(payload: T) {
    await window.ajax.put(`/api/admin/${this.url}`, payload)
  }
  async delete(id: string | number) {
    await window.ajax.delete(`/api/admin/${this.url}/${id}`)
  }
}

上面代码中包含了 基本的curd操作 ，和数据的存储（字段属性），不能在外部读取的字段 只需要设置get就行了 ，可以读写的设置 get set

上面代码中用到了BaseEntity 和PageResult 两个类型 代码如下

 

base-entiy.ts

export default interface BaseEntity {
  id: number | string
  createTime: Date
  createUserId: number
  updateTime: Date
  updateUserId: number
}

page-result.ts

export default class PageResult<T> {
  items: T[] = []
  totalCount: number = 0
}

作为子类 ，只需要继承基类就可以了 无需多余代码，比如下面的 UserStore

user-store.ts

import { reactive } from 'vue'
import User from '../entities/user'
import BaseStore from './base-store'
class UserStore<T> extends BaseStore<User> {
  url = 'user'
}

export default reactive(new UserStore())

上面只需要这几行代码就实现了完整的的user的curd  ，还包括分页等操作，代码量大大减少，同样的方法可以实现TeacherStore， StudentStore…… 

如果基类的方法不能满足业主需求，子类里面可以加入自己特定方法

导出store包裹一层reactive变成代理对象， 可以响应ui界面

实体类 User代码如下

user.ts

import BaseEntity from './base-entity'

export default interface User extends BaseEntity {
  id:number
  password: string
  name: string
  phone:string
  email:string
}

 

这样使用store的话就很简单了，就像下面的代码

import userStore from '@/store/user-store'

userStore.getAll()

const list=userStore.list

userStore.eidtItem=list[0]

这样的好处就是全部都是强类型，写代码的时候有智能提示，书写错误编译不通过！不像之前vuex，写起来太难了

 

像一般后台管理网站，最基本就是 一个列表页面 一个新增对话框 一个修改对话框 ，这样我们还可以进一步去抽象， 提取公共的方法、字段，进一步去减少代码量。比如实现 ListViewModel<T>  CreateViewModel<T>  EditViewModel<T>   这里就不再写了