uniのthis役割ドメイン問題

カタログの紹介

01.まず、ケース

を見てみましょう.

02.ソリューション

を見てみましょう
01.まず一つのケースを見る

コードは次のとおりです.

は、クリックボタン1がtitleコンテンツを更新できることを発見したが、クリックボタン2はtitleコンテンツを更新できない.これはいったいどうしてですか.

	export default{
		data(){
			return{
				title : "     ",
			}
		},
		methods:{
			changeTitle1(){
				this.title = "    1";
			},
			//           success  ，    this         
			changeTitle2(){
				uni.setStorage({
				    key: 'storage_key',
				    data: 'hello',
				    success: function () {
						this.title = "    2";
				        console.log('changeTitle2------success');
				    }
				});
			},
		}
	}

なぜchangeTitle 2はtitleの内容を変更できないのか

changeTitle 2メソッドのsuccessメソッドでは、このsuccessメソッドは閉パケットを指すため、thisは閉パケットに属するため、successコールバック関数ではthisを直接使用することはできない.titleの.

02.ソリューションを見る

は、このような動作によって、役割ドメインの問題

を解決することができることを発見することができる.

第1のソリューション

解決策は、閉パケットの外でthisを別の変数

に割り当てることです.

//                  
changeTitle3(){
	//  
	var me = this;
	uni.setStorage({
	    key: 'storage_key',
	    data: 'hello',
	    success: function () {
			me.title = "    3";
	        console.log('changeTitle2------success');
	    }
	});
},

第2のソリューション

矢印関数を使ってもこの問題を解決できますが、なぜなのか考えてみましょう.

changeTitle4(){
	uni.setStorage({
	    key: 'storage_key',
	    data: 'hello',
	    success:() => {
			this.title = "    4";
	        console.log('changeTitle2------success');
	    }
	});
},