Store

Por convención usaremos las acciones de vuex para comunicarnos con el backend mediante axios. En este sentido crearemos en la carpeta store un modulo de vuex para cada entidad de la lógica. ejemplo:

/store
    - global.js
    - users.js
    - companies.js
    - vehicles.js
    - warehouses.js
    ...

Donde cada módulo tiene la siguiente anatomía

export const state = () => {
  return {
    someVariableToPersist: '',
    ...
  }
}

export const getters = {
  getSomeVariableToPersist: (state) => {
    return state.someVariableToPersist
  }
}

export const mutations = {
  setsomeVariableToPersist(state, value) {
    state.someVariableToPersist = value
  }
}

export const actions = {
  async list({ commit }, options) {
    // await some code
  }
}

Normalmente usaremos la constante actions para crear los métodos que nos comunicarán con el backend, por ejemplo:

/* 
   /store/users.js 
*/

export const actions = {

  async list({ commit }, filter) {
    const res = await this.$axios.get(`/users?filter=${JSON.stringify(filter)}`)
    const countResp = await this.$axios.get(
      `/users/count?where=${JSON.stringify(filter.where)}`
    )

    const users = []
    let aux
    Object.keys(res.data).map((e) => {
      aux = res.data[e]
      users.push(aux)
    })

    return {
      data: users,
      count: countResp.data.count,
    }
  },

  async find({ commit }, id) {
    ...
  },

  async create({ commit }, user) {
    ...
  },

  async update({ commit }, user) {
    ...
  },

  async deactivate({ commit }, id) {
    ...
  },

  async delete({ commit }, id) {
    ...
  },
  
}

Luego, en cualquier parte de la aplicación podemos llamar a estas acciones mediante el método dispatch de vuex

const response = await this.$store.dispatch('users/find', userId)

Un concepto repetido en DNA es el de scheme, mediante el cual se definen las características para usar ciertos componentes, como el mantenedor crud autogenerado, el formulario autogenerado, la importación/exportación de excel. Es una buena idea centralizar el scheme de una entidad dentro de el state de un módulo. de esta manera se puede definir el scheme una sola vez para toda la aplicación y usarlo en los escenarios que se estime conveniente.