Way To Make Inheritance In Vuex Modules

Im building my app with VueJS and Vuex and I'm facing the issue when I have Multiple modules using the same data fields. Its about API configuration like dat. getUsers ({ state, co

Solution 1:

I put my reusable vuex code in small classes. E.g.

crud.js

exportdefaultclass {
    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 = {
          asyncstore( context, payload ) {
               *(call to API)*
          },
          asyncupdate( context, payload ) {
               *(call to API)*
          },
          *...etc*
      };
      this.mutations = {
         STORED(state, item) {
            state.known.push(item);
         },
         *...etc*
      };
   }
}

Then I can use it in all of my modules:

user.module.js

importCrudfrom'/crud';
var crud = newCrud('/api/users');

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

exportdefault {
   namespaced: true,
   state,
   getters,
   actions,
   mutations
};

Solution 2:

Developing a little bit more Erin's response, you can define a base class with common features like this:

exportdefaultclassBaseModule {
    protectedstate() {
        return {
            isLoading: false,
        };
    };
    protectedgetters() {
        return {
            isLoading(s) {
                return s.isLoading;
            },
        };
    };
    protectedactions() {
        return {};
    };
    protectedmutations() {
        return {
            [START_TRANSACTION]: (s) => {
                s.isLoading = true;
            },
            [END_TRANSACTION]: (s) => {
                s.isLoading = false;
            },
        };
    }
    protectedmodules() {
        return {};
    };

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

You can now extend/override only the parts you need in derived classes, with class inheritance; for example, if you need to extend the modules...:

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

exportdefaultclassItemListModuleextendsBaseModule {  
  protectedmodules() {
    return {
      ...super.modules(),
      rowDensity,
    };
  };
}

Finally, to use them as modules in the store, you can instantiate them and call .getModule():

importVuefrom'vue';
importVuexfrom'vuex';
importItemListModulefrom'./modules/ItemListModule';

Vue.use(Vuex);

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

exportconstMODULE_NAMESPACES = {
  List: 'list',
};

exportdefaultnewVuex.Store({
  modules: {
    [MODULE_NAMESPACES.List]: newItemListModule().getModule(),
  },
  strict: debug,
});

Solution 3:

I figured out some inheritance with the state fields according to:

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

exportdefault {
    namespaced: true,
    state,
    getters,
    actions,
    mutations,
    modules : {
        apiResponses
    }
}

I exported apiResponses module after the module user with namespaced and next i did the same thing with posts.

The namespaces inherited those message / status states and their mutations and which i just called in my user and post module. Now they are working corectly.

My message muttation form apiResponses:

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

Works inside actions of my user modules

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

Then in my commponent I just call.

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

        }),
    },

EDITED

The last part of my issue is like that.

I got action inside apiResponse Module

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]);
        }
    }
}

And then inside my user and other module i called it like:

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'
        });

    });
},

And the last thing, we need to make this new module reusable to according to docs we need to create it like a components.

exportdefault {
    state() {
        return {
            message : '',
            status : 0,
        }
    },
    getters,
    mutations,
    actions
}

With the state as function :)

Hope somone else got same issue :D

Solution 4:

here is what I've done:

first of all, I created a mainApi.js whose duty is to just make connection with apis

mainApi.js

import axios from"@/plugins/axios";

exportdefault {
    get(url ,id){
        return axios.get(`/${url}/${id}`);
    },
    getAll(url, filter) {
        return axios.get(`/${url}`, {params: {...filter}});
    },
    create(url ,teBeCreated){
        return axios.post(`/${url}`, teBeCreated);
    },
    update(url ,toBeUpdated){
        return axios.put(`/${url}/${toBeUpdated.oid}`, toBeUpdated);
    },
    delete(url ,id){
        return axios.delete(`/${url}/${id}`);
    },
}

second: I wrote a base class to define needed functions to store data. then this class can be inherited by other store modules.

gate.js

import mainApi from'@/api/main'import store from'@/store'exportdefaultclass {

  constructor() {

    this.state = {
        view: null,
        list: [],
    };

    this.getters = {
        view: (state) => state.view,
        list: (state) => state.list,
    }

    this.mutations = {
        SET_VIEW(state, payload) {
            state.view = payload;
        },
        SET_LIST(state, payload) {
            state.list = payload;
        },
        UN_SET_VIEW(state) {
            state.view = null;
        },
        UN_SET_LIST(state) {
            state.list = [];
        },
    }

    this.actions = {
        get({ commit }, { url, id }) {
            returnnewPromise((resolve, reject) => {
                mainApi.get(url, id)
                    .then(response => {
                        commit('SET_VIEW', response.data.data);
                        resolve(response)
                    })
                    .catch(error => {
                        console.log("error in get method in gate store: ", error);
                        commit('UN_SET_VIEW');
                        reject(error)
                    })
            });
        },
        getAll({ commit }, { url, filter }) {
            returnnewPromise((resolve, reject) => {
                mainApi.getAll(url, filter)
                    .then(response => {
                        commit('SET_LIST', response.data.data);
                        resolve(response)
                    })
                    .catch(error => {
                        console.log("error in getAll method in gate store: ", error);
                        commit('UN_SET_LIST');
                        reject(error)
                    })
            });
        },
        create({ commit }, { url, params }) {
            returnnewPromise((resolve, reject) => {
                mainApi.create(url, params)
                    .then(response => {
                        resolve(response)
                    })
                    .catch(error => {
                        console.log("error in create method in gate store: ", error);
                        reject(error)
                    });
            });
        },
        update({ commit }, { url, params }) {
            returnnewPromise((resolve, reject) => {
                mainApi.update(url, params)
                    .then(response => {
                        resolve(response)
                    })
                    .catch(error => {
                        console.log("error in update method in gate store: ", error);
                        reject(error)
                    })
            })
        },
        delete({ commit }, { url, id }) {
            returnnewPromise((resolve, reject) => {
                mainApi.delete(url, id)
                    .then(response => {
                        resolve(response);
                    })
                    .catch(error => {
                        console.log("error in delete method in gate store: ", error);
                        reject(error)
                    })
            });
        },
    }
}

third: now, we can define as many separate store modules as we need. as you can see below, in each module we just need to get the data retrieved from views and pass them to mainApi (gate.js base class's functions and methods are all part of our modules) and manipulate with received data.

someStore.js

importGatefrom'@/store/modules/gate'let gate = newGate();
const url = 'customUrl'const gateStates = { ...gate.state }
const gateGetters = { ...gate.getters }
const gateMutations = { ...gate.mutations }

const state = {
    ...gateStates,
};
const getters = {
    ...gateGetters,
};
const mutations = {
    ...gateMutations,
};

const actions = {
    get: ({ commit }, id) => gate.actions.get({ commit }, { url, id }),
    getAll: ({ commit }) => gate.actions.getAll({ commit }, {url, filter: {}}),
    create: ({ commit }, params) => gate.actions.create({ commit }, { url, params }),
    update: ({ commit }, params) => gate.actions.update({ commit }, { url, params }),
    delete: ({ commit }, id) => gate.actions.delete({ commit }, { url, id })
};

exportdefault {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
};

finally we should import our modules and define them as "vuex store modules" so:

store/index.js

importVuefrom'vue'importVuexfrom'vuex'import someModule from'./modules/someModule'Vue.use(Vuex)

exportdefaultnewVuex.Store({

    state: {},

    mutations: {},

    actions: {},

    modules: {
        someModule
    },

    plugins: {}

})

in this example I used anotherPromise because I needed the server responses directly in my views. if you want to just use responses in your store, there is no need for these Promises and they should be removed as below:

in gate.js change this

get({ commit }, { url, id }) {
    returnnewPromise((resolve, reject) => {
        mainApi.get(url, id)
            .then(response => {
                commit('SET_VIEW', response.data.data);
                resolve(response)
            })
            .catch(error => {
                commit('UN_SET_VIEW');
                console.log("error in getOne method in gate store: ", error);
                reject(error)
            })
    });
},

to this

get({ commit }, { url, id }) {
    mainApi.get(url, id)
        .then(response => {
            commit('SET_VIEW', response.data.data);
        })
        .catch(error => {
            commit('UN_SET_VIEW');
            console.log("error in getOne method in gate store: ", error);
        })
},

in this way, you have list and view parameters in each module and they can be easily called in your views:

someView.vue

created() {
    store.dispatch('someModule/get', this.$route.params.id)
}

computed: {
    view() {
        return store.getters('someModule/view')
    }
}

Solution 5:

As a personal challenge I wanted to be able to create a pure ES6 class that could express this need (meaning no annotation allowed). I thus created an AbstractModule class defining the high level operations:

exportdefaultclassAbstractModule {
    constructor(namespaced = true) {
        this.namespaced = namespaced;
    }

    _state () {
        return {}
    }

    _mutations () {
        return {}
    }

    _actions () {
        return {}
    }

    _getters () {
        return {}
    }

    static _exportMethodList (instance, methods) {
        let result = {};
        // Process methods when specified as arrayif (Array.isArray(methods)) {
            for (let method of methods) {
                if (typeof method === 'string') {
                    result[method] = instance[method].bind(instance);
                }

                if (typeof method === 'function') {
                    result[method.name] = method.bind(instance);
                }

                // else ignore
            }
        }

        // Process methods when specified as plain objectif (typeof methods === "object") {
            for (const [name, method] ofObject.entries(methods)) {
                if (typeof method === 'string') {
                    result[name] = instance[method].bind(instance);
                }

                if (typeof method === 'function') {
                    result[name] = method.bind(instance);
                }
            }
        }

        // Process methods when specified as single stringif (typeof methods === 'string') {
            result[name] = instance[methods].bind(instance);
        }

        // Process methods when specified as single callbackif (typeof methods === 'function') {
            result[name] = methods.bind(instance);
        }

        return result;
    }

    staticmodule() {
        let instance = newthis();
        console.log(instance);

        return {
            namespaced: instance.namespaced,
            state: instance._state(),
            mutations: AbstractModule._exportMethodList(instance, instance._mutations()),
            actions: AbstractModule._exportMethodList(instance, instance._actions()),
            getters: AbstractModule._exportMethodList(instance, instance._getters())
        }
    }
}

From this I created my own class module by redefining the parent methods I wanted to customize this way:

export default classQuestionModuleextendsAbstractModule{
    constructor(question) {
        super();
        this.question = question;
    }

    selectLine (state, line) {
        this.question.selectLine(line);
    }

    unselectLine (state, line) {
        this.question.unselectLine(line);
    }

    submit ({ state, commit, rootState }) {
        /** API call */
    }

    _state () {
        returnthis.question;
    }

    _mutations () {
        return [this.selectLine, this.unselectLine, this.validate];
    }

    _actions () {
        returnthis.submit;
    }
}

Final step is to declare my class module into the Vuex store (through a call to the module static method):

conststore=newVuex.Store({
  modules: {
      question: QuestionModule.module()
  },
  strict: process.env.NODE_ENV !== 'production'
});