相对于react,vue更具备的是灵活,对于vue的使用之前一直使用的是vue+vuex+vuex的组合,但是用起来,不是很方便,手动组合的代码块太多。听到朋友的想法,是简单的列表只需要很简单的配置就可以完成组件的使用。
简单的使用:需要三个属性传递
注:案例是结合es6 +vue+vuex+typescript使用的
1.form
这个是列表的查询formProp
formProp: {
type: Object,
default: function () {
return {};
}
}
//还需做属性观察,便于prop的双向传递,传递到本地的model的form
watch: {
formProp (val) {
this.form = val;
}
},
2.需提供一个对于后端的BaseCURDServiceClient(此为抽象类)的实现
//属性声明
// 包含curd
httpClientService: {
type: Object,
default: function () {
return new BaseCURDServiceClient()
}
},
定义抽象类,定义三个操作方法 find delete action
/*
作为CURDService
*/
import {Feign, ResultDto} from "../../annotation/feign/Feign";
import {Pageable} from "./Pageable";
abstract class BaseCURDServiceClient extends Feign{
public abstract async find?(parameters:any):Promise>>
public abstract async delete?(id:number):Promise>
public async action?(actionBody:object):Promise>
}
export default BaseCURDServiceClient;
比如此处使用的案例是RoleService
@FeignClient({resourceName:"indexService", baseUrl:Applicaiton.applicaiton["domain"]["dfs"]})
export default class IndexService extends Feign{
@Get("/api/oauth/role",true)
public async find?(parameters:any):Promise>>{return;}
@Delete("/api/oauth/role/:id")
public async delete?(id:number):Promise>{return;}
@Post("/api/oauth/role")
public async action?(role:Role):Promise>{return;}
}
使用者只需跟后端对应的path,就可灵活的使用了
3.columnsProp列属性传递
使用者只需如下使用即可
至于内部组件构造,比较重要的是vuex的局部store,往常使用,项目里是把store作为一个集合放在一个包中,比如
但如此不易分离组件,所以需要分离出一个独立的store,且该状态管理依赖到组件内部vuex包内部
他的state定义如下
export default function store(client:BaseCURDServiceClient){
return new Vuex.Store({
state: {
dataSource: {
pageable: {
loading: true,
current: 0,
total: 100,
pageSize: 10
},
data: []
},
services:{
clientService: client
},
notice: {
code: '',
content: ''
}
}
此处的datasource就是与UI息息相关的数据绑定,clientService是与后端CRUD的交互服务,notice是各操作在UI体现的通知UI,至于分页与挂载时机如下
methods: {
pageChange (page) {
this.store.dispatch('find', {...this.form, page: page, size: this.dataSource.pageable.pageSize});
},
pageSizeChange (size) {
this.store.dispatch('find', {...this.form, page: this.dataSource.pageable.current, size: size});
},
handleSubmit () {
this.find({...this.form, page: this.dataSource.pageable.current, size: this.dataSource.pageable.pageSize});
},
deleteRecord (deleteForm) {
// this.$emit('deleteById', deleteForm);
this.store.dispatch('delete', deleteForm);
},
// editRecord (editForm) {
// this.$emit('editRecord', editForm);
// }
},
mounted () {
this.store.dispatch('find', {...this.form, page: 1, size: 10});
}