El uso de la optimización del código mezclador Vue mixins

escenarios de uso

Retirado de la principal código de montaje común, tales como datos en cada página de la pestaña de montaje, métodos y ui uniforme prototipo confirmar y emergente de alerta
y una barra de progreso cargado

mezclador:

// mixin.js
export const page =  {
    data() {
        return {
           pageSize:20,
           currentPage: 1
           pageLength: 10,
        }
    },
 
  methods: {
    /**
     * 上一页
     */
    prevPage (page) {
      ...
    },
    /**
     * 下一页
     */
    nextPage (page) {
      ...
    }
    /**
     * 跳转到当前页
     */
    currentPage (page) {
      ...
    }
  }
}


export const ui= {
    methods: {
        async loadingData (target, callback) {
            const loading = this.$loading({
                lock: true,
                text: '处理中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.5)',
                target: target ? target : document.body,
            });
            try {
                await callback();
            } finally {
                loading.close();
            }
        },

        confirm (msg,title='提示',doConfirm, doCancel, options={}) {

          let defaultOpts ={
            type: 'warning'
          };
          let opts =  { ...defaultOpts, ...options };
          let iconClassObj = {
            'warning':'el-icon-warning-outline',
            'err':'el-icon-circle-close',
            'success':'el-icon-circle-check'
          }
          let iconColorObj = {
            'warning':'#e6a23c',
            'err':'#EE020B',
            'success':'#14B216'
          }
          const  iconClass = iconClassObj[opts.type];
          const  iconColor = iconColorObj[opts.type];
          let html =`<i style="color:${iconColor}; font-size:66px;margin-top: -22px;" class="${iconClass}"></i><br>
            <p style="font-size:16px;color: #333333;font-weight:500;margin-top: 7px;">${title}</p><span style="font-size:14px;color: #969696;font-weight:400;">${msg}</span>`;
          this.$confirm(html, '', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            dangerouslyUseHTMLString: true,
            center: true,
            cancelButtonClass:'dialog-cancel-btn',
            confirmButtonClass: 'dialog-confirm-btn'
          }).then(async () => {
            try {
              if (doConfirm) {
                await doConfirm();
              }
            }
            catch (err) {
              console.log(err);
            }
          }).catch(async () => {
            try {
              if (doCancel) {
                await doCancel();
              }
            }
            catch (err) {
              console.log(err);
            }
          });
        },

        alert (msg, title='提示', doCancel) {
            this.$alert(msg, title, {
                showConfirmButton: false,
                callback: async action => {
                    if (action == 'cancel') {
                        if (doCancel) {
                            await doCancel();
                        }
                    }
                },
            });
        },

    },
};

página .vue

<template>
  <div class="home-model">
    <my-table :data="data"></my-table>
    <my-paging
      :page-length="pageLength"
      :page-size="pageSize"
      :current-page="currentPage"
      :total="total">
    </my-paging>
  </div>
</template>

<script>
  import page from '../mixins/mixin'
  export default {
    mixins: [page],
    data () {
      return {
        data: [],
        pageLength: 10,
        pageSize: 1,
        currentPage: 1,
        total: 20
      }
    },
    methods:{
        handleDelete(){
               this.confirm('请确认是否需要删除?','确认删除？',async () => {
                    await this.loadingData('.el-container', async () => {
                        await this.apiDeletData();
                    });
                    this.loadListData();
                });
        }
    }
  }
</script>

Puede ser dividida en tres partes: a escribir parte de interfaz de usuario, la sección de datos paginado,
UserData parte

Seguimiento de los contenidos vuex