有个vue2的问题困扰我几天了，想请教一下老师。

来源：3-3 歌手列表固定标题实现（上）

qq_我深知你是梦丶_04338108

2021-08-05

// 1. 点击handleClick修改this.params，正常发起请求
// 2. 切换到其他路由再切换回来，mounted正常执行，但是this.params没有初始化，依然是上一次handleClick修改后的数据 
// 3. 如果params参数不多的话可以直接在mounted重置，但是碰到params参数几十个的情况，mounted里再全部初始化有点太难受了。
data() {
	params: {
		paramA: 1,
		paramB: 2,
		paramC: 3
	}
},
mounted() {
	console.log(this.params) // paramA 11
	const { params } = this;
	apiXXX(params) // api请求
},
methoed: {
	handleClick() {
		const { params } = this;
		params.paramA = 11;
		apiXXX(params) // api请求
	}
}

写回答

2回答

ustbhuangyi

2021-08-05

首先，请求参数是否一定要定义成响应式，如果只是在组件上下文共享，是否直接在 created 钩子函数中执行 this.params 的初始化。
其次，如果要保留初始化参数 params，那么在点击回调函数发送 API 之前，可以通过 const params = Object.assign({}, this.params) 拷贝它的副本（如果参数中有对象数据，那么需要执行深拷贝，可以借助 lodash 的 deepClone）。这样你就不用担心对原始数据的修改了。

qq_我深知你是梦丶_04338108

目前的做法是在created或者mounted对this.params初始化，this.params需要响应式，我希望的是，每次进来路由，this.params都能重置的，然而实际是，当对params做了赋值操作之后，切换路由，再不刷新页面的情况下，再次回来，依然会保留上次赋值的结果，而不是初始化定义的结果，这样每次进来，我的api请求就不是初始化状态了，我不确定vue本身就是这样，还是我的做法有问题。

2021-08-05

共1条回复

ustbhuangyi

2021-08-05