Monitor global variables in the uniapp Alipay applet component

第一步App.vue(定义监听方法)
//APP.vue文件
1、定义监听的变量nickName
2、在methods里定义一个watch方法
<script>
export default {
    
    
  globalData: {
    
    
    nickName: "",
  },
  methods: {
    
    
    watch(methods, istr) {
    
    
      //methods:组件内的方法;istr:监听的全局变量
      let obj = this.globalData;
      //Object.defineProperty()方法,会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象
      Object.defineProperty(obj, istr, {
    
    
        // value:"hello", // 属性对应的值,默认为 undefined
        // writable:false, // 默认为 false,表示只读,无法给该属性赋值。在严格模式中,给只读属性赋值会报错。宽松模式中,给只读属性赋值不会生效
        enumerable: true, // 目标属性是否可以被枚举。true | false(使用for...in或Object.keys())
        configurable: true, // 目标属性是否可以被删除或是否可以再次修改特性 true | false
        set: function (value) {
    
    
          //当设置值的时候触发的函数,设置的新值通过参数value拿到
          this._consumerGoodsStatus = value;
          methods(value);
        },
        get: function (value) {
    
    
          return this._consumerGoodsStatus;
        },
      });
    },
  },
};
</script>
第二步改变全局变量(getApp().globalData.nickName = data.nickName)
(可根据自己的业务场景修改全局变量)
全局封装的request请求方法 
import AuthService from './auth.service';
import baseUrl from 'envConfig';
import {
    
     authApi } from "@/api/login";
const handleMessage = (statusCode, data, resolve) => {
    
    
	let message = "";
	switch (statusCode) {
    
    
		case 200:
			if (data.code === 200) {
    
    
				resolve(data);
			} else if (data.code == 400003) {
    
    
				// message = 'token过期' ;
				AuthService.removeToken()
				my.getAuthCode({
    
    
					scopes: "auth_base",
					success: async (res) => {
    
    
						let {
    
     data } = await authApi({
    
     authCode: res.authCode });
						AuthService.setToken(data.token)
						AuthService.setUser(data)
						getApp().globalData.nickName = data.nickName
					},
				});
			} else if (data.code == 400333) {
    
    
				// message = '请授权' ;
				AuthService.removeToken()
				my.getAuthCode({
    
    
					scopes: "auth_user",
					success: async (res) => {
    
    
						let {
    
     data } = await authApi({
    
     authCode: res.authCode });
						AuthService.setToken(data.token)
						AuthService.setUser(data)
							getApp().globalData.nickName = data.nickName
					},
				});
			} else {
    
    
				message = data.msg;
				resolve(data);
			}
			break;
		case 400:
			message = '错误请求';
			break;
		case 401:
			message = '未授权,请重新登录';
			break
		case 403:
			message = '当前用户未授权,请联系管理员';
			break
		case 404:
			message = '请求错误,未找到该资源';
			break
		case 405:
			message = '请求方法未允许';
			break
		case 408:
			message = '请求超时';
			break
		case 500:
			message = '服务器内部出错';
			break
		case 501:
			message = '网络未实现';
			break
		case 502:
			message = '网络错误';
			break
		case 503:
			message = '服务不可用';
			break
		case 504:
			message = '网络超时';
			break
		case 505:
			message = 'http版本不支持该请求';
			break
		default:
			message = `连接错误${
      
      statusCode},请联系管理员`;
	}

	if (statusCode > 200 || (statusCode === 200 && (data.code != 200&&data.code != 400003 && data.code != 400333) )) {
    
    
		uni.showToast({
    
    
			title: message,
			icon: 'none',
			duration: 2500,
		})
	}
}
export default (method, url, param) => {
    
    
	console.log(AuthService.getToken(), "+AuthService.getToken()")
	const headers = {
    
    
		'Accept': 'application/json, text/plain, */*',
		'Content-Type': 'application/json;charset=utf-8',
		'Authorization': `${
      
      AuthService.getToken()}`
	}
	// param?.token && (headers['Authorization'] = `${param?.token}`)
	//判断是否过期
	let timeout = AuthService.getTimeOut();
	let timenow = +new Date();

	if (timenow >= timeout && !url.includes('applet/auth/')) {
    
    
		AuthService.removeTimeout();
		uni.request(Object.assign({
    
    }, {
    
    
			url: `${
      
      baseUrl.base_url}/auth/refresh`,
			data: {
    
    },
			header: headers,
			method: "POST",
			success: ({
     
     
				statusCode,
				data
			}) => {
    
    
				const expires_in = +new Date() + 720 * 60 * 1000
				AuthService.setTimeOut(expires_in)
			},
			fail: (err) => {
    
     }
		}));
	}
	return new Promise((resolve, reject) => {
    
    
		uni.request(Object.assign({
    
    }, {
    
    
			url: `${
      
      baseUrl.base_url}${
      
      url}`,
			data: param,
			header: headers,
			method: String(method).toUpperCase(),
			success: ({
     
     
				statusCode,
				data
			}) => {
    
    
				handleMessage(statusCode, data, resolve)
			},
			fail: (err) => {
    
    
				reject(err)
			}
		}));

	})
}
第三步页面(组件内)监听全局变量nickname
<tempalte>
	<view>页面组件</view>
</template>
<script>
import AuthService from "@/services/auth.service";
export default {
    
    
  data() {
    
    
    return {
    
    
        userInfo: {
    
    },
    };
  },
  onLoad(){
    
    
    getApp().watch(this.getUserInfo, 'nickName'); 
  },
  methods: {
    
    
    getUserInfo(value){
    
    //value获取到的最新的昵称nickName
    	console.log(value,"最新的昵称")
      this.userInfo = AuthService.getUser();
    },
  },
};
</script>

Guess you like

Origin blog.csdn.net/qq_42859450/article/details/128834231