Vue 快速提示：更清晰的数据获取

Vue 快速提示：获取数据

我们遇到的一个常见用例是需要使用 Vue 组件显示从 API 获取的数据。

例如，假设我们有一个名为的 Vue 组件ViewAvenger.vue，它根据 id 显示复仇者联盟的成员信息。一种常见的做法是将一个idprop 传递给组件。实际的 API 调用由组件本身通过方法调用来处理getData。

	<script>
	export default {
	props: {
	id: Number,
	},

	data() {
	return {
	avenger: {} // Our avenger object is initially empty
	};
	},

	methods: {
	async getData() {
	// API calls are usually asynchronous:
	const avenger = await this.$api.get(`avengers/${this.id}`);
	this.avenger = avenger;
	}
	},
	}
	</script>

	<script>
	export default {
	props: {
	id: Number,
	},

	data() {
	return {
	avenger: {} // Our avenger object is initially empty
	};
	},

	methods: {
	async getData() {
	// API calls are usually asynchronous:
	const avenger = await this.$api.get(`avengers/${this.id}`);
	this.avenger = avenger;
	}
	},
	}
	</script>

假设我们想在组件挂载时立即获取数据。那么我们将mounted生命周期方法添加到组件中。

	<script>
	export default {
	props: {
	id: Number,
	},

	data() {
	return {
	avenger: {}
	};
	},

	mounted() {
	// We call the getData method when the component is mounted
	this.getData();
	},

	methods: {
	async getData() {
	const avenger = await this.$api.get(`avengers/${this.id}`);
	this.avenger = avenger;
	}
	},
	}
	</script>

	<script>
	export default {
	props: {
	id: Number,
	},

	data() {
	return {
	avenger: {}
	};
	},

	mounted() {
	// We call the getData method when the component is mounted
	this.getData();
	},

	methods: {
	async getData() {
	const avenger = await this.$api.get(`avengers/${this.id}`);
	this.avenger = avenger;
	}
	},
	}
	</script>

这没问题，但如果我们的idprop 发生了变化怎么办？我们没办法调用getData。要做到这一点，我们需要watchpropid的变更。

	<script>
	export default {
	props: {
	id: Number,
	},

	data() {
	return {
	avenger: {}
	};
	},

	watch: {
	// Call 'getData' when 'id' prop changes
	id: 'getData',
	},

	mounted() {
	this.getData();
	},

	methods: {
	async getData() {
	const avenger = await this.$api.get(`avengers/${this.id}`);
	this.avenger = avenger;
	}
	},
	}
	</script>

	<script>
	export default {
	props: {
	id: Number,
	},

	data() {
	return {
	avenger: {}
	};
	},

	watch: {
	// Call 'getData' when 'id' prop changes
	id: 'getData',
	},

	mounted() {
	this.getData();
	},

	methods: {
	async getData() {
	const avenger = await this.$api.get(`avengers/${this.id}`);
	this.avenger = avenger;
	}
	},
	}
	</script>

通过定义，我们告诉我们的组件每当prop 发生变化时watcher调用该方法。getDataid

我们的组件现在运行良好。但是，如何重写它使其更简洁呢？
我们使用watchprops！

观察者可以拥有immediateprop，它告诉组件立即触发处理程序方法。这意味着我们可以摆脱该mounted方法，从而节省一些代码行。

	<script>
	export default {
	props: {
	id: Number,
	},

	data() {
	return {
	avenger: {}
	};
	},

	watch: {
	id: {
	// This tells our component to fire the handler ASAP:
	immediate: true,
	handler: 'getData'
	}
	},

	/* We don't need the mounted hook anymore!
	* mounted() {
	* this.getData();
	* },
	*/

	methods: {
	async getData() {
	const avenger = await this.$api.get(`avengers/${this.id}`);
	this.avenger = avenger;
	}
	},
	}
	</script>

	<script>
	export default {
	props: {
	id: Number,
	},

	data() {
	return {
	avenger: {}
	};
	},

	watch: {
	id: {
	// This tells our component to fire the handler ASAP:
	immediate: true,
	handler: 'getData'
	}
	},

	/* We don't need the mounted hook anymore!
	* mounted() {
	* this.getData();
	* },
	*/

	methods: {
	async getData() {
	const avenger = await this.$api.get(`avengers/${this.id}`);
	this.avenger = avenger;
	}
	},
	}
	</script>

最后，我们可以进一步简化！我们可以将整个getData函数移到监视处理程序中。为了提高可读性，我们可以this.从 API 调用中删除前缀，因为我们可以直接使用id处理程序函数的参数！

	<script>
	export default {
	props: {
	id: Number,
	},

	data() {
	return {
	avenger: {}
	};
	},

	watch: {
	id: {
	immediate: true,
	async handler(id) {
	// We also replace 'this.id' simply with the 'id' argument:
	const avenger = await this.$api.get(`avengers/${id}`);
	this.avenger = avenger;
	}
	}
	}
	}

	<script>
	export default {
	props: {
	id: Number,
	},

	data() {
	return {
	avenger: {}
	};
	},

	watch: {
	id: {
	immediate: true,
	async handler(id) {
	// We also replace 'this.id' simply with the 'id' argument:
	const avenger = await this.$api.get(`avengers/${id}`);
	this.avenger = avenger;
	}
	}
	}
	}

就这样，我们有效地节省了更多代码行。
希望你觉得这个技巧有用，感谢阅读！