Best way to store reusable data


#1

Hello,
I have a big Datatable with 10 properties in each row and with editable action in Modal window.
When App created() I have 2 JSON requests: first for refData (for dropdowns) and second rowData (containing main data).

This is my current App data:

data: {
	items: [],
	avalableRefname1: [], // will be filled with refData from json
	avalableRefname2: [],
	... 10 available references...
	refName1: {}, // will be filled with reformatted  refData
	refName2: {},
	... 10 available references...
}

JSON refData looks like :

{
	refName1: [ {id: 1, name: "name1"}, {id: 2, name: "name2"},...],
	refName2: [ {id: 0, name: "name0"}, {id: 1, name: "name1"},...], // array length can be 10-6000
	...
}

After getting all JSON refData I create variables for each reference and values formatted to objects like:

refName1 = { 
	1: {id: 1, name: "name1"},
	34: {id: 34, name: "name34"},
	...
}

JSON rowData looks like:

[{ 
	id: 1, 
	propForRef1: [1, 2, 3], // array of IDs
	propForRef2: [32, 33 ...],
	propForRef3: [ {id: 1, p: 1}, {id: 2, p: 2} ... ]
	propForRef4: true,
	...
},
... 1000-3000 rows
] 

In Datatable I display RowItems with corresponding names to each ID. For rows I use component:

<edit-row
	:item="item"
	:key="item.id"
	@edit="edit"
	@remove="remove"
	@clone="clone"
	@save="save"
	:ref-name1="refName1"
	:ref-name2="refName2"
	... all 10 refData's
	></edit-row>

and for Edit in Modal window I use component:

<edit-modal
	v-if="showDialog"
	:item="curItem"
	:item="curItem"
	@close-modal="closeModal"
	@save-modal="saveModal"
	:ref-name1="refName1"
	:avalableRefname1="avalableRefname1"
	:ref-name2="refName2"
	:avalableRefname2="avalableRefname2"
	... all refNames and availableRefnames
	></edit-modal>	

All refNames and avalaibleRefnames are passed each as separate prop and there are too many of them.

So my question is:
1) Can I pass all refNames and avalaibleRefnames as nested object like:

data: {	
	allAvailableRefnames: {
		avalableRefname1: [ {id: 1, name: "name1"}, {id: 2, name: "name2"}, ...],
		avalableRefname2: [ {id: 12, name: "name123"}, {id: 13, name: "name13"}, ...],
		...
	},
	allRefnames: {
		refName1: { 
			1: {id: 1, name: "name1"},
			34: {id: 34, name: "name34"},
			...
		},
		refName2: { ... },
		...
	},
}

And in components pass only 2 variables allAvailableRefnames and allRefnames.

2) Will it affect the performance ?


#2

Can somebody answere ?
thanks