الوحدات النمطية في Vue.js و Vuex

عند كتابة تطبيقات أمامية كبيرة ، يمكن أن تكون إدارة الحالة مهمة شاقة ومملة.

بالنسبة لـ Vue.js ، تم تطوير مكون إضافي لـ Vuex لإدارة الحالة. بشكل افتراضي ، يحتوي على بنية المجلد التالية:

هيكل المجلد في متجر Vuex

يمكن استخدام بنية المجلد هذه في التطبيقات الصغيرة ، ولكن في التطبيقات الكبيرة من المرجح أن تبدو شفرة المصدر غير قابلة للقراءة وقبيحة ، وبمرور الوقت يصبح من الصعب العمل معها.

,

, . :

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

أعلاه هي الطريقة المستحسنة للإعلان عن الكتابة أو الكتابة عنها ، ولكن يمكن الوصول إليها عن طريق تعيين الحروف إلى حقول كائن خاصية محسوب ، مثل هذا:

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

لقد كانت رحلة طويلة ، آمل أن تكون قد تمكنت من استخدام Vuex المعياري وكتابة رمز أنظف.