ASENKRON MODÜLLER

VERİYİ MODELLEME

​HATA YÖNETİMİ

Vuex ve Efektif Kullanımı

2018 - Frontend Istanbul

   /abdullah

Abdullah MARA

Başlamadan Önce,

Asenkron Çağrıları Yönetme

Teşekkürler Altay Aydemir

Her aksiyon icin;

3 Type

3 Mutations

4 State

1* Getter

STATE

        export const driverGroupState = {
          list: {
            isLoading: false,
            isLoaded: false,
            data: [],
            errors: {}
          }
        };

TYPES

        export const types = {
          INDEX: {
            REQUEST: 'DRIVER_GROUPS/INDEX_REQUEST',
            SUCCESS: 'DRIVER_GROUPS/INDEX_SUCCESS',
            FAILURE: 'DRIVER_GROUPS/INDEX_FAILURE'
          }
        };

GETTER

   
        export const getters = {
          DriverGroups: state => state.list
        };

MUTATION

        export const mutations = {
          [types.INDEX.REQUEST](state) {
            state.list = {
              ...state.list,
              isLoading: true,
              errors: {}
            };
          },
          [types.INDEX.SUCCESS](state, payload) {
            state.list = {
              isLoading: false,
              isLoaded: true,
              data: payload.data,
              errors: {}
            };
          },
          [types.INDEX.FAILURE](state, payload) {
            state.list = {
              isLoading: false,
              isLoaded: false,
              data: [],
              errors: payload.error
            };
          }
        };

ACTION

    async getDriverGroups({ commit }) {
      commit({ type: types.INDEX.REQUEST });
      try {
        const res = await getDriverGroups();
        commit({ type: types.INDEX.SUCCESS, payload: { data: res.data } });
      } catch (error) {
        commit({ type: types.INDEX.FAILURE, payload: { error } });
      }
    }

    /* eslint-disable no-param-reassign */
    import { getDriverGroups } from '@/api/DriverGroups';
    
    export const types = {
      INDEX: {
        REQUEST: 'DRIVER_GROUPS/INDEX_REQUEST',
        SUCCESS: 'DRIVER_GROUPS/INDEX_SUCCESS',
        FAILURE: 'DRIVER_GROUPS/INDEX_FAILURE'
      }
    };
    
    export const driverState = {
      list: {
        isLoading: false,
        isLoaded: false,
        data: [],
        errors: {}
      }
    };
    
    export const getters = {
      DriverGroups: state => state.list
    };
    
    export const mutations = {
      [types.INDEX.REQUEST](state) {
        state.list = {
          ...state.list,
          isLoading: true,
          errors: {}
        };
      },
      [types.INDEX.SUCCESS](state, payload) {
        state.list = {
          isLoading: false,
          isLoaded: true,
          data: payload.data,
          errors: {}
        };
      },
      [types.INDEX.FAILURE](state, payload) {
        state.list = {
          isLoading: false,
          isLoaded: false,
          data: [],
          errors: payload.error
        };
      }
    };
    
    export default {
      state: driverState,
      getters,
      mutations,
      actions: {
        async getDriverGroups({ commit }) {
          commit({ type: types.INDEX.REQUEST });
          try {
            const res = await getDriverGroups();
            commit({ type: types.INDEX.SUCCESS, payload: { data: res.data } });
          } catch (error) {
            commit({ type: types.INDEX.FAILURE, payload: { error } });
          }
        }
      }
    };
    

8 Modül'ü tek bir komponentin kullanması

😱

VERİYİ MODELLEME

Neden? Ne demek?

Verinin Görselleştirilmesi,

Jenerik alanlar, Form'lar

Fazlalıklardan kurtulma

import { pick } from 'lodash';

export class DynamicFieldsModel {
  static validationRules = {
    name: { required: true },
    dynamicFieldDataTypeId: { required: true },
    dynamicFieldSourceTypeId: { required: true },
    dynamicFieldSource: { required: true },
    label: { required: true }
  };

  constructor(data = {}, fieldList = []) {
    this.data = data;
    this.model = this.getModel();
    const formModel = this.getModel();
    formModel.fields = fieldList.find(f => f.id === formModel.dynamicFieldGroupId);
    this.form = formModel;
  }

  getModel() {
    return pick(this.data, [
      'id',
      'dynamicFieldGroupId',
      'dynamicFieldDataTypeId',
      'name',
      'label',
      'fieldOrder',
      'dynamicFieldSourceTypeId',
      'dynamicFieldSource',
      'isActive',
      'changedBy',
      'changedAt'
    ]);
  }
}

export default {
  DynamicFieldsModel
};

    
        
        
        
            <!--  -->
            <b-select placeholder="Data Type"
                      name="datatype"
                      expanded
                      v-validate="DynamicFieldsModel.validationRules.dynamicFieldDataTypeId"
                      :loading="DynamicFieldDataTypes.list.isLoading"
                      v-model="form.dynamicFieldDataTypeId">
              <option v-for="option in DynamicFieldDataTypes.list.data"
                      :value="option.id"
                      :key="option.id">
                {{ option.name }}
              </option>
            </b-select>
            <!--  -->

ERROR HANDLING

   
   const errorHandler = store => {
      store.subscribe(mutation => {
        const { type, payload } = mutation;
        if (payload && payload.error) {
         // Do this
        }
      });
    };