抛弃vuex ,拥抱ts,手撸泛型Store<T>!
前段时间学习了下vue3 和ts ,就尝试下做了个项目,结果发现vuex和ts几乎无法结合,越写越别扭,开始怀疑用ts就是自己给自己挖坑,然后加了几个vue相关的群,去抱怨了几句,得到大佬指点:你可以不用vuex!
对,我可以不用vuex,然后尝试实现了一个自己的store ,本人虽然前端是个小白,但c#还是写了五六年,对泛型还是比较熟悉的,写完之后对ts大爱。不多说了 上代码:
Store基类代码如下 :
base-store.ts
1 import BaseEntity from '@/entities/base-entity'
2 import PageResult from '@/entities/page-result'
3 import { readonly } from '@vue/reactivity'
4
5 export default abstract class BaseStore<T extends BaseEntity> {
6 protected url = ''
7 protected _all: T[] = []
8 public get all() {
9 return readonly(this._all)
10 }
11
12 protected _list: T[] = []
13 public get list() {
14 return readonly(this._list)
15 }
16
17 protected _editItem: T | undefined
18 public get editItem() {
19 return this._editItem
20 }
21 public set editItem(val: T | undefined) {
22 this._editItem = val
23 }
24
25 protected _currentPage = 1
26 public get currentPage() {
27 return this._currentPage
28 }
29 public set currentPage(val) {
30 this._currentPage = val
31 }
32
33 protected _pageSize = 30
34 public get pageSize() {
35 return this._pageSize
36 }
37 public set pageSize(val) {
38 this._pageSize = val
39 }
40
41 protected _totalCount = 0
42 public get totalCount() {
43 return this._totalCount
44 }
45
46 protected _loading = false
47 public get loading() {
48 return this._loading
49 }
50
51 async getAll() {
52 const response = await window.ajax.get(`/api/admin/${this.url}/getall`)
53 this._all = response.data
54 }
55 async get(query: any) {
56 this._loading = true
57 const response = await window.ajax.get(`/api/admin/${this.url}`, { params: query })
58 this._loading = false
59 const page = response.data as PageResult<T>
60 this._totalCount = page.totalCount
61 this._list = page.items
62 }
63 async getById(id: string | number) {
64 const response = await window.ajax.get(`/api/admin/${this.url}/${id}`)
65 return response.data
66 }
67 async create(payload: T) {
68 await window.ajax.post(`/api/admin/${this.url}`, payload)
69 }
70 async update(payload: T) {
71 await window.ajax.put(`/api/admin/${this.url}`, payload)
72 }
73 async delete(id: string | number) {
74 await window.ajax.delete(`/api/admin/${this.url}/${id}`)
75 }
76 }
上面代码中包含了 基本的curd操作 ,和数据的存储(字段属性),不能在外部读取的字段 只需要设置get就行了 ,可以读写的设置 get set
上面代码中用到了BaseEntity 和PageResult 两个类型 代码如下
base-entiy.ts
1 export default interface BaseEntity {
2 id: number | string
3 createTime: Date
4 createUserId: number
5 updateTime: Date
6 updateUserId: number
7 }
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> 这里就不再写了
抛弃vuex ,拥抱ts,手撸泛型Store<T>!的更多相关文章
- 手撸Router,还要啥Router框架?react-router/vue-router躺一边去
有没有发现,在大家使用React/Vue的时候,总离不开一个小尾巴,到哪都得带着他,那就是react-router/vue-router,而基于它们的第三方框架又出现很多个性化约定和扩展,比如nuxt ...
- Haskell手撸Softmax回归实现MNIST手写识别
Haskell手撸Softmax回归实现MNIST手写识别 前言 初学Haskell,看的书是Learn You a Haskell for Great Good, 才刚看到Making Our Ow ...
- .NET手撸绘制TypeScript类图——上篇
.NET手撸绘制TypeScript类图--上篇 近年来随着交互界面的精细化,TypeScript越来越流行,前端的设计也越来复杂,而类图正是用简单的箭头和方块,反映对象与对象之间关系/依赖的好方式. ...
- 手撸ORM浅谈ORM框架之Add篇
快速传送 手撸ORM浅谈ORM框架之基础篇 手撸ORM浅谈ORM框架之Add篇 手撸ORM浅谈ORM框架之Update篇 手撸ORM浅谈ORM框架之Delete篇 手撸ORM浅谈ORM框架之Query ...
- 手撸ORM浅谈ORM框架之Update篇
快速传送 手撸ORM浅谈ORM框架之基础篇 手撸ORM浅谈ORM框架之Add篇 手撸ORM浅谈ORM框架之Update篇 手撸ORM浅谈ORM框架之Delete篇 手撸ORM浅谈ORM框架之Query ...
- 手撸ORM浅谈ORM框架之Delete篇
快速传送 手撸ORM浅谈ORM框架之基础篇 手撸ORM浅谈ORM框架之Add篇 手撸ORM浅谈ORM框架之Update篇 手撸ORM浅谈ORM框架之Delete篇 手撸ORM浅谈ORM框架之Query ...
- 手撸ORM浅谈ORM框架之Query篇
快速传送 手撸ORM浅谈ORM框架之基础篇 手撸ORM浅谈ORM框架之Add篇 手撸ORM浅谈ORM框架之Update篇 手撸ORM浅谈ORM框架之Delete篇 手撸ORM浅谈ORM框架之Query ...
- C#基于Mongo的官方驱动手撸一个Super简易版MongoDB-ORM框架
C#基于Mongo的官方驱动手撸一个简易版MongoDB-ORM框架 如题,在GitHub上找了一圈想找一个MongoDB的的ORM框架,未偿所愿,就去翻了翻官网(https://docs.mongo ...
- php手撸轻量级开发(一)
聊聊本文内容 之前讲过php简单的内容,但是原生永远是不够看的,这次用框架做一些功能性的事情. 但是公司用自己的框架不能拿出来,用了用一些流行的框架比如tp,larveral之类的感觉太重,CI也不顺 ...
随机推荐
- PythonPEP8 风格规范指南
PEP是Python Enhancement Proposal的缩写,通常翻译为"Python增强提案".每个PEP都是一份为Python社区提供的指导Python往更好的方向发展 ...
- 微信小程序:数据绑定
data中的数据不仅仅可以当成文本来显示,还可以当成属性来显示. 注意:属性值要用单引号或双引号引起来. 在微信开发者工具的控制台中点击Wxml会看到 使用Boolean类型充当属性的时候,字符串和花 ...
- Go中的if-else判断
目录 go中的if-else判断 一.语法 go中的if-else判断 一.语法 if 条件 { //符合上面条件的执行 } else if 条件{ //符合上面条件的执行 } else { // 不 ...
- 手把手教你手写一个最简单的 Spring Boot Starter
欢迎关注微信公众号:「Java之言」技术文章持续更新,请持续关注...... 第一时间学习最新技术文章 领取最新技术学习资料视频 最新互联网资讯和面试经验 何为 Starter ? 想必大家都使用过 ...
- 如何进BAT,有了这个篇面试秘籍,成功率高达80%!!(附资料)
多年前自己刚来北京找工作的时候,面了一个星期 面了七八家公司才拿到一个offer.而上次跳槽面了不到10家公司基本全过而且都给到了期望的薪资,本来自己在面试前没想到能够这么顺利,回想起来还是自己准备的 ...
- pytorch(04)简单的线性回归
线性回归 线性回归是分析一个变量与另外一个变量之间关系的方法 因变量:y 自变量:x 关系:线性 y = wx+b 分析:求解w,b 求解步骤: 确定模型,Model:y = wx+b 选择损失函数, ...
- Java 基础加强 01
基础加强·网络编程 和 GUI 网络编程概述 * A:计算机网络 * 是指将地理位置不同的具有独立功能的多台计算机及外部设备,通过通信连接起来 在网路操作系统,网络管理软件和网络通信协议的管理下,实现 ...
- CVE-2017-10271 XMLDecoder 反序列化
漏洞描述:WebLogic的 WLS Security组件对外提供webservice服务,其中使用了XMLDecoder来解析用户传入的XML数据,在解析的过程中出现反序列化漏洞,可以构造请求对运行 ...
- sitemesh简单介绍
SiteMesh 是一个网页布局和修饰的框架,利用它可以将网页的内容和页面结构分离,以达到页面结构共享的目的. Sitemesh是由一个基于Web页面布局.装饰以及与现存Web应用整合的框架. 它能帮 ...
- 2017算法期末复习练习赛-G Beihang Couple Pairing Comunity 2017 题解(网络流)
理解不够透彻.好题不可浪费,写题解以增进理解.会陆续补充题目.(咕咕咕) G Beihang Couple Pairing Comunity 2017 题目链接 Beihang Couple Pair ...