Vue异步执行接口请求，解决数据获取不到就去加载的问题

通过vue的异步请求数据的方法，去解决页面加载但是没有数据的问题

• 首先引入方法

在main.js中引入全局异步请求的方法。代码如下

//全局引用异步执行请求方法       这里的可以通过传入在某个页面想要请求的接口
Vue.prototype.$visitStore = async (option) => {
	//如果是ajax，注意要加同步等待
	await http.get({
		url: '/s***e/ch****ys', // url: option，直接这样引用即可，我这里是写死了
	}).then(res => {
		console.log('执行成功');
		store.commit('systeminfo',res)
	}).catch(err => {
		console.log('执行失败', err);
	});

}

• 上面的http、store.commit方法均为封装好的 request以及vuex组件的注册

import Vue from 'vue' //引入vue框架
import App from './App'

//注册vuex组件
import store from './store'
Vue.prototype.$store = store

import http from './common/requestConfig.js' //request封装 引入
Vue.prototype.$http = http //request封装 引入

• 页面调用定义的全局方法

在全局中定义好方法以后去页面中调用此方法

	async onLoad(e) {
		// 页面中执行这个请求方法  也可以传值URL链址
		await this.$visitStore();//同步执行这个方法
	}

• 请求方法成功后，在异步请求的成功回调后执行store.commit('systeminfo',res)，就是将获取到的数据赋值到vuex。

• 在vuex中对获取到的返回值进行处理

vuex中定义上变量，然后写上一个接受并赋值的方法。

	const store = new Vuex.Store({
		//定义变量
		state: {
			//系统信息 系统模式
			sysmode: {}，
			sysinfo: {}，
		},
		//方法
		mutations: {
		//用于异步请求后的赋值   接受传值
		async systeminfo(state,provider){
			//将接收后的值赋给定义好的变量
			state.sysmode = provider;
			state.sysinfo = provider.sysinfo;
		},
	}

• 在页面中使用处理后的值

最后在页面中引入vuex对于的信息，使用即可。

import {mapState} from 'vuex';//引入vuex定义的state属性
export default {
	computed: {
		...mapState(['sysmode']) //引入需要用到的值
	},
}
//html 中使用 {{sysmode}}
//js 中使用 this.sysmode

整体的使用步骤(流程)为

页面调用this.$visitStore();方法。

   async onLoad(e) {
   	// 页面中执行这个请求方法  也可以传值URL链址
   	await this.$visitStore();//同步执行这个方法
   }

该方法执行请求

//全局引用异步执行请求方法       这里的可以通过传入在某个页面想要请求的接口
Vue.prototype.$visitStore = async (option) => {
	//如果是ajax，注意要加同步等待
	await http.get({
		url: '/s***e/ch****ys', // url: option，直接这样引用即可，我这里是写死了
	}).then(res => {
		console.log('执行成功');
		store.commit('systeminfo',res)
	}).catch(err => {
		console.log('执行失败', err);
	});

}

将获取到的返回值传到vuex进行赋值。

	//方法
		mutations: {
		//用于异步请求后的赋值   接受传值
		async systeminfo(state,provider){
			//将接收后的值赋给定义好的变量
			state.sysmode = provider;
			state.sysinfo = provider.sysinfo;
		},

最后在页面中取值使用

import {mapState} from 'vuex';//引入vuex定义的state属性
export default {
	computed: {
		...mapState(['sysmode']) //引入需要用到的值
	},
}
//html 中使用 {{sysmode}}
//js 中使用 this.sysmode