在vue2 中用脚手架建立的项目，后端提供接口获取数据。在公司做第一个项目的时候不清楚公司里的对接流程，结果后续代码被一个接口整的乱七八糟，这个接口是获取用户信息的接口——'usre/info'。
如果用户登录了以后，很多（几乎全部）页面都要用到userinfo，难道每个页面都要写个 getUserInfo 方法去获取？好烦的好吧，如果你不觉得烦，那不用往下看了。。。
再写完第一个项目后，我在反思这个userinfo数据要怎么处理好，下边处理的关键代码：
index.html 中引入的 public.js ... var USERINFO = 500;
var CANNEXT = false; ...
APP.vue
export default {
beforeCreate: function(){
this.axios.post('user/info',{}).then(function(res){
if (res.data.code == 200)
{
USERINFO = res.data.data;
}
CANNEXT = true;
}).catch(function(error){console.log("后院起火了 =>" + error);});
},
}
main.js
router.beforeEach((to, from, next) => {
let requestnum = 0;
let timer = setInterval(function(){
requestnum++;
if (CANNEXT)
{
console.log(requestnum);
clearInterval(timer);
next();
}
},10);
})
vue的全局混合
var mixin = {
data: function(){
USERINFO: USERINFO
}
}
module.exports = mixin
这么写了后项目整体代码好了很多。如果用户登录了， USERINFO就是用户信息对象，未登录就是500了。而USERINFO这个变量因为在混合里，所以 template标签里也可以直接用。