全局跨页面回调

uni-app借助vuex全局跨页面回调

更新日志

• 2022-8-11
• 2022-8-12

使用

vuex

	import { mapGetters } from 'vuex';
	export default {
		computed: {
			...mapGetters({
				get_promise: 'global/get_promise'
			})
		},
		...mapGetters({
			user_info: 'user/info',
			get_promise: 'global/get_promise'
		})
	}

异步调用

	/**
	 *   @params [data] 非必须，调用时需要传递给接收方的数据
	 *   @params [key] 非必须，设置本次调用事件的id
	 *   
	*/
	this.$store.dispatch("global/wait_do", {data, key}).then(({key, promise})=>{
		uni.navigateTo({
			url: `url?promise_key=${key}`
		});
		promise().then(res=>{
			uni.navigateBack();
			setTimeout(()=>{ // 等待页面动画播放完毕
				uni.showLoading({
					title: '更新中...'
				});
			}, 300);
		});
	});

同步调用

	let {key, promise} = await this.$store.dispatch("global/wait_do", data);
	uni.navigateTo({
		url: `url?promise_key=${key}`
	});
	let res = await promise();

被调用方的响应代码

	// onLoad时保存promise_key
	onLoad(){
		this.promise_key= promise_key;
	},
	// 页面卸载，触发失败回调
	onUnload(){
		try{
			this.$store.getters["global/get_promise"](this.promise_key).instance.reject();
		}catch(err){
			console.info({err});
		}
	}
	
	// 调用成功，响应成功回调
	try{
		this.$store.getters["global/get_promise"](this.promise_key).instance.resolve();
	}catch(err){
		console.info({err});
	};

源代码

// 跨页面回调
let state = {
		promises: {},
	},
	getters = {
		get_promise(state) {
			return (key) => {
				if (!key) console.error("invalid key in get_promise");
				return state.promises[key];
			}
		}
	},
	mutations = {
		set_promises(state, [key, payload]) {
			state.promises[key] = {
				...state.promises[key],
				...payload
			};
		},
	},
	actions = {
		wait_do(store, {
			data = {},
			key
		} = {}) {
			if (!key) key = `xz${Date.now()}`;
			store.commit("set_promises", [key, {
				data
			}]);
			console.log({
				key
			});
			return {
				key,
				promise: () => {
					return new Promise((resolve, reject) => {
						store.commit("set_promises", [key, {
							instance: {
								resolve,
								reject
							}
						}]);
					});
				}
			};
		},
	}
export default {
	namespaced: true,
	state,
	getters,
	mutations,
	actions
}