uniapp踩坑：this的指向问题导致无法正确修改数据

项目场景：

在使用uiapp进行开发时，发现无法对data里面的数据进行正确的修改。

---

问题描述：

任务要求是用户上传视频时，可以选择是拍摄视频还是本地上传，然后会根据用户的选择进行视频的上传。
因此我分了三步实现：
1、使用uni.showActionSheet让用户选择怎么上传视频。
2、在uni.showActionSheet的success回调里面使用uni.chooseVideo进行视频上传操作。
3、在uni.chooseVideo的success回调里面对于data的数据进行修改。

				uni.showActionSheet({
					itemList: ["拍摄视频", "本地上传"],
					itemColor: "#333333",
					success(res) {
						let chooseSourcs
						switch (res.tapIndex) {
							case 0:
								chooseSourcs = 'camera'
								break;
							case 1:
								chooseSourcs = 'album'
								break;
						}
						uni.chooseVideo({
							type: 'video',
							sourceType: [chooseSourcs],
							success(res) {
								this.videoSrc=res.tempFilePath
								this.showVideo = true
							}
						})
					}
				})

		data() {
			return {
				showVideo: false,
				videoSrc: ""
			}
		}

此时运行后发现，并不能将data数据正确的修改为新数据。

---

原因分析：

由于不知道原因在哪里，因此我就直接将res.tempFilePath打印出来看看数据是否有问题，然后发现数据正确的拿到了。
然后我又将this.videoSrc和this.showVideo打印了出来，结果发现是undefined。
但是data里面的数据都是正确的，怎么会是undefined呢？
所以问题就很显而易见了，是this的指向出了问题，在success回调中，this指向的不是VUE实例，感兴趣的可以把这个时候的this打印一下看看是什么就会明白了。

---

解决方案：

解决方案其实很简单，既然在success里面的this不是VUE实例，那么我直接在全局里面设置一个that变量去接收正确的this（即VUE实例）不就完事了吗？然后我再在success里面通过调取that就能成功修改数据了。
定义一个that变量接收this：

// <script>
	let that = null
// 	export default {
// 		data() {
// 			return {
//		...

onLoad中接收this：

onLoad() {
			that = this
		},

将this修改为that：

//				...
//				chooseSourcs = 'album'
//								break;
//						}
//						uni.chooseVideo({
//							type: 'video',
//							sourceType: [chooseSourcs],
//							success(res) {
								that.videoSrc=res.tempFilePath
								that.showVideo = true
//							}
//						})
//					...

现在引申一下，如果success里面调用的是VUE实例的一个方法videoVerify(res)，那么方法里面的this需要改为that吗？

//				...
//				chooseSourcs = 'album'
//								break;
//						}
//						uni.chooseVideo({
//							type: 'video',
//							sourceType: [chooseSourcs],
//							success(res) {
								this.videoVerify(res)
//							}
//						})
//					...

		videoVerify(res) {
			this.showVideo = true
			this.videoSrc = res.tempFilePath
		}

答案是不需要，只有在success中才需要借助额外的that变量指向正确的VUE实例，所以在success调用videoVerify(res)时，方法前面的this要改为that。

正确的使用方法：

//				...
//				chooseSourcs = 'album'
//								break;
//						}
//						uni.chooseVideo({
//							type: 'video',
//							sourceType: [chooseSourcs],
//							success(res) {
								that.videoVerify(res)
//							}
//						})
//					...

		videoVerify(res) {
			this.showVideo = true
			this.videoSrc = res.tempFilePath
		}