Javascript 클래스 오브젝트를 Vuex 상태에서 사용해도 될까요?

Javascript 클래스 오브젝트를 Vuex 상태에서 사용해도 될까요?

간단한 Vuex 상태가 레시피를 보유하고 있다고 가정해 보겠습니다.

const state = {
    recipe: {
        id: '',
        name: "",
        ingredients : [],
    }
};

대신 동일한 데이터를 보유한 레시피 클래스를 만들고 해당 상태에서 해당 클래스를 클래스의 인스턴스로 선언하는 것이 좋은 방법입니까?

const state = {
    recipe: new Recipe()
};

레시피 클래스에 메서드가 있는 경우 vuex 스토어의 getters/mutation을 통해 메서드를 프록시해야 합니까?아니면 메서드를 직접 호출해도 됩니까?

확실한 대답을 할 수는 없지만, 그렇다고 대답하고 싶습니다만, 주(州)의 수업을 이용하실 수 있습니다.나는 이 우수 관행이 관심사 분리 설계 원칙에 부합한다고 생각한다.단, 이러한 클래스에서 직접 호출하는 메서드는 사용할 수 없습니다.

tl;dr;

• 클래스를 DTO 또는 모델로 사용
• 메서드의 상태를 깨끗하게 유지하지만 필요에 따라 일부 "계산된 상태"를 추가할 수 있습니다.
• 돌연변이에 필요한 만큼 데이터를 변환하고, 필요에 따라 위에서 "계산된 상태"를 변환합니다.
• 필요한 경우 특정 getter를 사용하여 특정 데이터를 선택합니다.아마도 동일한 기본 데이터에 대해 다수의 getter를 사용할 수 있습니다.
• 필요에 따라 주(州), 게터(getter) 및 돌연변이(modiation)에서 직접 메서드를 사용하는 대신 주(州) 외부에서 별도의 코드를 구현합니다.

예

제 어플리케이션에서는 vuex와 typescript를 사용하여 API 응답과 요청의 다양한 부분을 나타내는 "api-model"을 작성했습니다.unitTree.ts의 처리를 담당하는 도우미 클래스 코드enterpriseUnitsTree의 로컬 서브셋인 스테이트의 일부caseFullData.

주(州)에서의 방법은 다음과 같습니다.ts(간소화):

import { ICaseFullDataViewModel, CaseFullDataViewModel, CaseApprovalDto, ICaseApprovalDto } from '@/api-model';
import { IEnterpriseUnitDataObjectTree } from '../code/unitTree';

export interface IEntryState {
    caseValidationMessages: string[];
    caseFullData: ICaseFullDataViewModel;
    enterpriseUnitsTree: Array<IEnterpriseUnitDataObjectTree>;
    caseApproval: ICaseApprovalDto;
}

export const state: IEntryState = {
    caseValidationMessages: null,
    caseFullData: new CaseFullDataViewModel(),
    enterpriseUnitsTree: null,
    caseApproval: new CaseApprovalDto()
};

데이터의 취득에 대해서는, 필요한 각 측면에 대해 완전한 getter 세트를 가지는 것을 추천합니다.주 자체를 비즈니스/유스 케이스가 아닌 주(州)로서 깨끗한 상태로 유지합니다.위의 데이터의 일부에 대해서는 아래의 getter를 참조하십시오.예를 들어, 에서 외부 코드를 사용하고 있습니다.unitTree.ts특정 항목을 추출하다enterpriseUnitsTree가게에서요.

getters.ts(간소화):

import { IRootState } from '@/store';
import { GetterTree } from 'vuex';
import { unitTree } from '../code/unitTree';
import { IEntryState } from './state';

export const CASE_ID = 'caseId';
export const CASE_FULL_DATA = 'caseFullData';
export const UNITS_SORTED_AS_TREE = 'unitsSortedAsTree';
export const FIRST_UNIT = 'firstUnit';


export const getters: GetterTree<IEntryState, IRootState> = {
    [CASE_ID]: state => state.caseFullData?.caseId,  
    [CASE_FULL_DATA]: state => state.caseFullData,
    [UNITS_SORTED_AS_TREE]: state => {
        return state.enterpriseUnitsTree;
    },
    [FIRST_UNIT]: state => () => {        
        const indexMap = unitTree.getIndexMap(state.enterpriseUnitsTree);
        const firstUnitIdentifier = indexMap.get(0);        
        return firstUnitIdentifier;
    }
    //.... 
};

에서mutations.ts, 나는 변이합니다.enterpriseUnitsTree필요에 따라서, 커밋을 수신했을 때에, 각각의 데이터를 다음과 같이 합니다.

다음은 modiations.ts(간소화) 코드입니다.

import { MutationTree } from 'vuex';
import {
    ICaseFullDataViewModel    
} from '@/api-viewmodel';
import { IEntryState } from './state';
import { unitTree } from '../code/unitTree';

export const MAPCASEFULLDATA = 'mapCaseFullData';
//....

export const mutations: MutationTree<IEntryState> = {
    [MAPCASEFULLDATA](state, value: ICaseFullDataViewModel) {
        state.caseFullData = value;
        //... some sorting and tree building using code from unitTree
        state.enterpriseUnitsTree = sortedEnterpriseUnits;
    },
    //.......
};

언급URL : https://stackoverflow.com/questions/53470027/is-it-okay-to-use-javascript-class-objects-in-vuex-state