CrudBuilder.js

import { mapActions } from 'vuex'

export default ({
  createFn = '',
  deleteFn = '',
  updateFn = '',
  paginationFn = '',
  clearFn = ''
}) => ({
  data: () => ({
    isLoading: true,
    loadingDelete: false,

    setModalState: {
      loading: false,
      show: false,
      doc: {}
    }
  }),

  async created() {
    if (!this.load) return

    this.isLoading = true
    await this.load()
    this.isLoading = false
  },

  beforeDestroy() {
    this.clearFn()
  },

  methods: {
    ...mapActions({
      clearFn,
      createFn,
      deleteFn,
      updateFn,
      paginationFn
    }),

    triggerModal(modalName, doc) {
      const modalState = this[`${modalName}ModalState`]

      modalState.show = !modalState.show
      modalState.doc = doc || {}
    },
    async confirmDelete(doc) {
      this.loadingDelete = true
      await this.deleteFn(doc)
      this.loadingDelete = false
    },
    async save(formData) {
      this.setModalState.loading = true

      const methodName = formData.id ? 'update' : 'create'
      await this[`${methodName}Fn`](formData)

      this.setModalState.loading = false
      this.setModalState.show = false
      this.setModalState.doc = {}
    },
    async search(search) {
      if (search === this.searchQuery) return
      await this.paginate({ perPage: 10, page: 1, search })
    },
    async paginate(options) {
      this.isLoading = true
      await this.paginationFn(options)
      this.isLoading = false
    }
  }
})

unidades.vue

<script>
import { mapActions, mapState } from 'vuex'
import { UnitForm, BasicCrud } from '@/components/molecules'
import CrudBuilder from '@/mixins/CrudBuilder'

const tableHeader = { unidade: 'Unidade' }

const crudOptions = {
  createFn: 'units/CREATE_UNIT',
  deleteFn: 'units/DELETE_UNIT',
  updateFn: 'units/UPDATE_UNIT',
  paginationFn: 'units/PAGINATE_UNITS',
  clearFn: 'units/CLEAR_PAGINATION'
}

export default {
  name: 'Units',
  layout: 'internal',

  components: {
    UnitForm,
    BasicCrud
  },

  mixins: [CrudBuilder(crudOptions)],

  data: () => ({ tableHeader }),

  computed: {
    ...mapState({
      companies: state => state.companies.items,
      units: state => state.units.pagination.items,
      pagination: ({
        units: {
          pagination: { items, ...data }
        }
      }) => data
    })
  },

  methods: {
    ...mapActions({
      fetchCompanies: 'companies/FETCH_COMPANIES'
    }),

    async load() {
      await Promise.all([this.fetchCompanies(), this.paginationFn()])
    }
  }
}
</script>