Modularität in Vue.js und Vuex

Beim Schreiben großer Front-End-Anwendungen kann das Verwalten des Status eine entmutigende und mühsame Aufgabe sein.

Für Vue.js wurde ein Vuex-Plugin für die Statusverwaltung entwickelt. Standardmäßig hat es die folgende Ordnerstruktur:

Ordnerstruktur im Vuex Store

Diese Ordnerstruktur könnte in kleinen Anwendungen verwendet werden, aber in großen Anwendungen sieht der Quellcode wahrscheinlich unlesbar und hässlich aus, und mit der Zeit wird es schwierig, damit zu arbeiten.

,

, . :

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

Oben ist die empfohlene Methode zum Deklarieren oder Schreiben eines Getters aufgeführt. Sie können jedoch darauf zugreifen, indem Sie Getter Feldern eines berechneten Eigenschaftsobjekts wie folgt zuordnen:

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

Es war eine lange Reise, hoffentlich haben Sie es geschafft, modulares Vuex zu verwenden und saubereren Code zu schreiben.