Vuex अतिक्रमण को तोड़ता है

जब मेरे Vue प्रोजेक्ट का विस्तार होने लगा और कई सौ घटकों तक पहुंची, तो मैंने Vue और Vuex के प्रोजेक्ट आर्किटेक्चर के दृष्टिकोण के बारे में सोचा।

मैंने लगभग 3 साल पहले अपनी परियोजनाओं में Vue का उपयोग करना शुरू कर दिया था। तब मैंने कोड लिखने के लिए शुद्ध js का उपयोग किया और माना कि js केवल दृश्यपटल में है, और NodeJs बड़ी परियोजनाओं के लिए अनुकूल नहीं है, लेकिन मैं गलत था ...

Typescript.
, . typescript .

, js typescript , . , , , Vue.

Vuex:

, Vuex, , vuex , (SRP). Vuex " ". , , . SRP . ?

( , , — , - , ). . DI . , DI Service Locator .
, Vuex , Vuex.

Vuex vuex-smart-module :

class UserState {
    firstName: string = '';
    lastName: string = '';
}

class UserGetters extends Getters<UserState> {
    get fullName() {
        return this.state.firstName + ' ' + this.state.lastName;
    }
}

class UserMutations extends Mutations<UserState> {
    setFirstName(firstName: string) {
        this.state.firstName = firstName;
    }

    setLastName(lastName: string) {
        this.state.lastName = lastName;
    }
}

class UserActions extends Actions<
    UserState,
    UserGetters,
    UserMutations,
    UserActions
    > {
    async load() {
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve();
                this.mutations.setFirstName('FirstName');
                this.mutations.setLastName('LastName');
            }, 2000);
        });
    }
}

export const userStore = new Module({
    namespaced: true,
    state: UserState,
    getters: UserGetters,
    mutations: UserMutations,
    actions: UserActions
})

User ApiDatasource ( ):

class User {
    id: number;
    firstName: string;
    lastnName: string;

    constructor(props: {
        id: number;
        firstName: string;
        lastnName: string;
    }) {
        this.id = props.id;
        this.firstName = props.firstName;
        this.lastnName = props.lastnName;
    }
}

class ApiDatasource {
    async getCurrentUser(): Promise<User> {
        return new User({
            id: 0,
            firstName: 'Name',
            lastnName: 'Lear',
        });
    }
}

ApiDatasource ( , Vuex new Module)? , State ( , ).

UserState UserActions:

class UserState {
    firstName: string = '';
    lastName: string = '';
    apiDatasource: ApiDatasource | null = null;
}
class UserActions extends Actions<
    UserState,
    UserGetters,
    UserMutations,
    UserActions
    > {
    async load() {
        if (this.state.apiDatasource !== null) {
            let currUser = await this.state.apiDatasource.getCurrentUser();
            this.mutations.setFirstName(currUser.firstName);
            this.mutations.setLastName(currUser.lastName);
        }
    }
}

:

const UserStoreModuleName = 'user;'
export function registerUserStore(props: {
    apiDatasource: ApiDatasource;
    vuexStore: Store<any>;
}) {
    registerModule(props.vuexStore, [UserStoreModuleName], UserStoreModuleName, userStore);
    (props.vuexStore.state[UserStoreModuleName] as UserState).apiDatasource = props.apiDatasource;
}

(, , )
, props.vuexStore.state[UserStoreModuleName] . (props.vuexStore.state[UserStoreModuleName] as UserState). state vue, , .

. ? , commit, dispatch .
, :

store.dispatch('user/load')

( action mutation), , . .

Service Locator. Vue , vuex, action mutation . , action load user, ( , ), , . load. , , , IDE , .

. Vuex action. ? , - , action, vuex.

, vuex ( ) SRP, . , , vuex ? , vuex — vuex - Vue.