有时候当一个数组或者对象比较大，且放在了前端，如果将数据放在vue中的data中，就会显得很多。且不方便以后维护，可以当都将这个数据项放在一个js文件中。

这是 js 中的代码，将数据封装在一个函数里面

export function dataInJs() { 
	var user = [
		{ 
			id: 1,
		},
		{ 
			id: 2,
		},
		{ 
			id: 3,
		},
		{ 
			id: 4,
		},
		{ 
			id: 5,
		},
		{ 
			id: 6,
		},
	];
	return user;
}

在vue中引入并使用

<script>
import {  dataInJs } from "./data";
export default { 
	name: "test", //test
	mixis: [],
	components: { },
	props: { },
	data() { 
		return { 
			userList: dataInJs(),
		};
	},
	computed: { },
	watch: { },
	created() { 
		console.log(this.userList);
	},
	mounted() { },
	destroyed() { },
	methods: { },
};
</script>

这是打印结果

注意：

1. 引入的方式 import { dataInJs } from "./data"; ，
   import 引入的名字要用花括号括起来，且这个名字要和 js 中函数名一致，
2. 在data中，将引入过来的数据，传给本地变量，userList: dataInJs()
   变量名后面的数据，实际是js中的函数，所以要加上括号。

除了将数据放在js中，也可以放在一个子组件中，专门用来保存数据。
子组件中的代码

<script>
export default { 
	name: "data", //data
	mixis: [],
	components: { },
	props: { },
	data() { 
		return { 
			userInfo: [{  id: 1 }, {  id: 2 }, {  id: 3 }, {  id: 4 }],
		};
	},
	computed: { },
	watch: { },
	created() { 
		this.$emit("userInfoList", this.userInfo);
	},
	mounted() { },
	destroyed() { },
	methods: { },
};
</script>

父组件中的代码

<template>
	<div class="container">
		<Sub @userInfoList="getUserInfo"></Sub>
	</div>
</template>
<script>
import Sub from "./data.vue";
export default { 
	name: "test", //test
	mixis: [],
	components: {  Sub },
	props: { },
	data() { 
		return { 
			userList: null,
		};
	},
	computed: { },
	watch: { },
	created() { 
		console.log("created");
		console.log("userList", this.userList);
	},
	beforeMount() { 
		console.log("beforeMount");
		console.log("userList", this.userList);
	},
	mounted() { 
		console.log("mounted");
		console.log("userList", this.userList);
	},
	destroyed() { },
	methods: { 
		getUserInfo(data) { 
			console.log(data);
			this.userList = data;
		},
	},
};
</script>

打印的信息

在子组件中引入数据，要在mounted中才可以获取到数据。

如有错误，欢迎指正，谢谢！
以上内容仅供参考，欢迎大家讨论。