用vue-cli基于ElementUI构建的项目。很多模块的很多动作需要先判断是否登录,如评论、点赞、收藏等。如果没有登录,就弹出登录框。请问如何在不同模块中调用一个公共函数达成这一需求。(目前的做法是每个页面都写一个判断函数,在点击前调用这个函数。这个函数通过一级一级的parent的refs来找到登录模块,然后将其显示)
2 回答
开满天机
TA贡献1786条经验 获得超12个赞
个人做法大体思路应该是:把登录弹窗组件放在app.vue组件内,由vuex内的变量控制显示与否。每次需要校验是否已登录时调用vuex内的方法进行校验,如果未登录则设置控制弹窗的变量为true,登录弹窗便会弹出。app.vue //登录弹窗组件
src/store/state.js(state)state={isGoLogin=false,//控制弹窗组件是否显示的变量}src/store/mutations.js(mutations)mutations={//校验是否已登录checkLogin(state){//...if(已登录){returntrue}if(未登录){state.isGoLogin=true;//登录弹窗显示returnfalse}}}使用方法(假设现在要触发评论方法):methods:{comment(){letisLogin=this.$store.commit("checkLogin");//校验是否已登录if(isLogin===false)return;//这里是评论操作...}}写到这里说一下不好的地方。就是每次调用,调用的这一边都做下面这个操作,还是有繁琐的操作步骤。感觉上应该是还可以再优化,一时间没想出来,我要下班了,有想法的老哥可以给点建议。letisLogin=this.$store.commit("checkLogin");//校验是否已登录if(isLogin===false)return;//...执行下一步操作