在Vuex状态下使用Javascript类对象可以吗？
假设我有一个简单的Vuex状态来保存食谱：
const state = {
recipe: {
id: '',
name: "",
ingredients : [],
}
};相反，创建一个包含相同数据的食谱类，然后在状态中将其声明为类的一个实例，这是一个很好的实践吗？
const state = {
recipe: new Recipe()
};如果菜谱类有方法，是应该通过vuex存储上的getter/突变来代理这些方法，还是可以直接调用这些方法？
回答 1
Stack Overflow用户
发布于 2021-03-04 06:48:48
虽然我不能给出一个权威的答案，但我会说是的，你应该在这个州使用类。我认为这种良好做法符合分离关注设计原则。但是，在这些类上不应该有直接调用的方法。
tl;dr；
- 使用类作为DTO或模型
- 保持状态干净的方法，但您可以添加一些“本地计算的状态”，如果需要。
- 在突变中尽可能多地变异数据，如果需要的话，甚至从上面突变一些“本地计算的状态”。
- 如果需要，使用特定的getter选择特定的数据，可能为相同的基础数据有许多getter。
- 如果需要，在状态、getter和突变之外实现单独的代码，而不是直接在这些方法中实现。
示例
在我的应用程序中，使用vuex和打字脚本，我编写了一个“API模型”，它代表了API响应和请求的各个部分，还有一些是unitTree.ts助手类代码，负责处理状态的enterpriseUnitsTree部分，这是caseFullData的一个本地子集。
下面是我如何在state.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进行变异：
下面是我在mutations.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;
},
//.......
};https://stackoverflow.com/questions/53470027
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号