🧑🏿‍🤝‍🧑🏼 👩🏿‍🚒 🙎🏾 Modularité dans Vue.js et Vuex 🛀🏿 👩🏽‍🏭 🏢

Lors de l'écriture d'applications frontales volumineuses, la gestion de l'état peut être une tâche ardue et fastidieuse.

Pour Vue.js, un plugin Vuex a été développé pour la gestion des états. Par défaut, il a la structure de dossiers suivante:

Structure des dossiers dans le magasin Vuex

Cette structure de dossiers pourrait être utilisée dans les petites applications, mais dans les grandes applications, le code source est susceptible de sembler illisible et laid, et avec le temps, il devient difficile de travailler avec.

, . :

Vuex (. .: , , store/modules/user/mutations.js, .. )

, . , index.js, Vuex. , index.js , :

import Vue from "vue";
import Vuex from "vuex";
import state from './state.js'
import actions from './actions.js'
import mutations from './mutations.js'
import getters from './getters.js'
import user from './modules/user/index.js'
Vue.use(Vuex);
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters,
    modules: {
        user
    }
});

«user», index.js, Vuex. , «user» , .

«user» state, actions, getters mutations modules/user/index.js :

import state from './state.js'
import mutations from './mutations.js'
import actions from './actions.js'
import getters from './getters.js'
export default {
    namespaced: true,
    state,
    mutations,
    getters,
    actions,
}

, namespaced true. , , , . ...

- Vuex , Vuex, . , userAvatar «user» userAvatar (. .: mapState: ...mapState(['userAvatar'])}). mapState (. .: ) :

import {mapState} from 'vuex'
export default {
    computed: {
        ...mapState({
            userAvatar: state => state.user.userAvatar
        })
    },
}

, :

export default {
    userAvatar: "img-location"
};

, «user» . , , :

import {mapActions} from 'vuex'
export default {
    methods: {
        ...mapActions("user", ["getUserInfo"]),
        userInfo() {
            this.getUserInfo()
            //       –     (. .: ,     <..mapActions("user", ["getUserInfo"]),>),       , 
            //   
            this.$store.dispatch('user/getUserInfo')
            //          –   getUserInfo
        }
    },
}

Vuex :

export default {
    getUserInfo() {
        alert('Successful')
    }
}

. .

export default {
    methods: {
        setuserInfo() {
            let data = {
                name: 'Henry'
            }
            this.$store.commit('user/setUserInfo', data)
        }
    },
}

Vuex :

export default {
    setUserInfo: (state, data) => {
        state.user = data
    }
}

. . – , :

export default {
    getActiveUsers: state => {
        return state.users.filter(x => x.active === true)
    }
}

Ci-dessus est la manière recommandée de déclarer ou d'écrire un getter, mais il est possible d'y accéder en mappant les getters aux champs d'un objet de propriété calculé, comme ceci:

import {mapState} from 'vuex'
export default {
    computed: {
        ...mapGetters('user', ['getActiveUsers'])
    },
}

Cela a été un long voyage, j'espère que vous avez réussi à utiliser Vuex modulaire et à écrire un code plus propre.

Modularité dans Vue.js et Vuex

More articles: