Manera de hacer herencia en módulos Vuex

Jimena, parte de nuestro equipo de trabajo, nos hizo el favor de redactar este artículo porque conoce perfectamente este tema.

Solución:

Puse mi código vuex reutilizable en clases pequeñas. P.ej

crud.js

export default class 
    constructor ( endpoint ) 
       this.state = 
          endpoint: endpoint,
          meta:     ,
          status:   null,
          known:    [],
          currentId: null,
       ;
       this.getters = 
          id: state => id => state.known.find( o => o.id === id )
       ;
       this.actions = 
          async store( context, payload ) 
               *(call to API)*
          ,
          async update( context, payload ) 
               *(call to API)*
          ,
          *...etc*
      ;
      this.mutations = 
         STORED(state, item) 
            state.known.push(item);
         ,
         *...etc*
      ;
   

Entonces puedo usarlo en todos mis módulos:

user.module.js

import Crud from '/crud';
var crud = new Crud('/api/users');

const state = 
   ...crud.state,
;
const getters = 
   ...crud.getters,
;
const actions = 
   ...crud.actions,
;
const mutations = 
   ...crud.mutations,
;

export default 
   namespaced: true,
   state,
   getters,
   actions,
   mutations
;

Desarrollando un poco más la respuesta de Erin, puede definir una clase base con características comunes como esta:

export default class BaseModule 
    protected state() 
        return 
            isLoading: false,
        ;
    ;
    protected getters() 
        return 
            isLoading(s) 
                return s.isLoading;
            ,
        ;
    ;
    protected actions() 
        return ;
    ;
    protected mutations() 
        return 
            [START_TRANSACTION]: (s) => 
                s.isLoading = true;
            ,
            [END_TRANSACTION]: (s) => 
                s.isLoading = false;
            ,
        ;
    
    protected modules() 
        return ;
    ;

    public getModule = () => 
        return 
            namespaced: true,
            state: this.state(),
            getters: this.getters(),
            actions: this.actions(),
            mutations: this.mutations(),
            modules: this.modules(),
        ;
    

Ahora puede extender / anular solo las partes que necesita en clases derivadas, con herencia de clases; por ejemplo, si necesita ampliar los módulos …:

import BaseModule from './BaseModule';
import rowDensity from '@/store/modules/reusable/rowDensity';

export default class ItemListModule extends BaseModule   
  protected modules() 
    return 
      ...super.modules(),
      rowDensity,
    ;
  ;

Finalmente, para usarlos como módulos en la tienda, puede instanciarlos y llamar .getModule():

import Vue from 'vue';
import Vuex from 'vuex';
import ItemListModule from './modules/ItemListModule';

Vue.use(Vuex);

const debug = process.env.NODE_ENV !== 'production';

export const MODULE_NAMESPACES = 
  List: 'list',
;

export default new Vuex.Store(
  modules: 
    [MODULE_NAMESPACES.List]: new ItemListModule().getModule(),
  ,
  strict: debug,
);

Descubrí algo de herencia con los campos estatales de acuerdo con:

https://vuex.vuejs.org/en/modules.html#namespacing

export default 
    namespaced: true,
    state,
    getters,
    actions,
    mutations,
    modules : 
        apiResponses
    

Exporté el módulo apiResponses después del usuario del módulo con espacio de nombres y luego hice lo mismo con las publicaciones.

Los espacios de nombres heredaron esos estados de mensaje / estado y sus mutaciones y que acabo de llamar en mi módulo de usuario y publicación. Ahora están funcionando correctamente.

Mi mensaje muttation formulario apiResponses:

[types.SET_MESSAGE] (state, message) 
    state.message = message;
,

Funciona dentro de las acciones de mis módulos de usuario

if (data.hasOwnProperty('message')) 
    commit(types.SET_MESSAGE, data.message);

Luego en mi componente solo llamo.

    computed: 
        ...mapGetters(
            user : 'user/user',
            userMessage : 'user/message',
            post: 'post/monitoring',
            postMessage : 'post/message',

        ),
    ,

EDITADO

La última parte de mi problema es así.

Tengo acción dentro del módulo apiResponse

let actions = 
    getResponseParsed(commit, payload) 
        console.log(payload)
        if (payload.data.hasOwnProperty('message')) 
            commit(types.SET_MESSAGE, payload.data.message);
        
        if (payload.data.hasOwnProperty('status')) 
            commit(types.SET_STATUS, payload.data.status);
        
        if (payload.data.hasOwnProperty(payload.property)) 
            commit(payload.mutation, payload.data[payload.property]);
        
    

Y luego, dentro de mi usuario y otro módulo, lo llamé como:

getUser ( state, commit, dispatch ) 
    axios.get(urls.API_GET_USER_URL).then( response => 
        let data = response.data;

        dispatch('getResponseParsed', 
            data : data,
            mutation : types.SET_USER,
            property : 'user'
        );

    );
,

Y lo último, debemos hacer que este nuevo módulo sea reutilizable de acuerdo con los documentos que necesitamos para crearlo como un componente.

export default 
    state() 
        return 
            message : '',
            status : 0,
        
    ,
    getters,
    mutations,
    actions

Con el estado como función 🙂

Espero que alguien más tenga el mismo problema: D

Aquí tienes las reseñas y puntuaciones

Si te gusta la programación, tienes la habilidad dejar una crónica acerca de qué le añadirías a esta reseña.

---

---

Utiliza Nuestro Buscador