Modularitas dalam Vue.js dan Vuex

Saat menulis aplikasi front-end yang besar, mengelola negara dapat menjadi tugas yang menakutkan dan melelahkan.

Untuk Vue.js, sebuah plugin Vuex dikembangkan untuk manajemen negara. Secara default, ini memiliki struktur folder berikut:

Struktur folder di toko Vuex

Struktur folder ini dapat digunakan dalam aplikasi kecil, tetapi dalam aplikasi besar kode sumber cenderung terlihat tidak dapat dibaca dan jelek, dan seiring waktu menjadi sulit untuk dikerjakan.

,

, . :

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

Di atas adalah cara yang disarankan untuk mendeklarasikan atau menulis getter, tetapi dapat diakses dengan memetakan getter ke bidang objek properti yang dihitung, seperti ini:

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

Ini perjalanan yang panjang, semoga Anda berhasil menggunakan modular Vuex dan menulis kode pembersih.