相對于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<ResultDto<Pageable<object>>>

    public abstract async delete?(id:number):Promise<ResultDto<object>>

    public async action?(actionBody:object):Promise<ResultDto<object>>
}

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<ResultDto<Pageable<Role>>>{return;}

    @Delete("/api/oauth/role/:id")
    public async delete?(id:number):Promise<ResultDto<object>>{return;}

    @Post("/api/oauth/role")
    public async action?(role:Role):Promise<ResultDto<object>>{return;}

}

使用者只需跟后端對應的path，就可靈活的使用了
3.columnsProp列屬性傳遞
使用者只需如下使用即可

<ui-rich-table :form="form" :columnsProp="columns" :httpClientService="httpClientService"></ui-rich-table>

至于內部組件構造，比較重要的是vuex的局部store，往常使用，項目里是把store作為一個集合放在一個包中，比如

圖片.png

但如此不易分離組件，所以需要分離出一個獨立的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});
      }