详解vue.js如何实现全局方法和全局变量
2017-11-14| 程成| 2179| 1| Vue.js

在写vuejs的时候,你肯定需要自定义一些全局方法或者全局变量,在其他页面需要调用。下面就说说我在写代码的时候,如何实现vuejs设置全局方法和全局变量的。


如果没有设置全局方法,那么你需要在需要调用方法的时候添加下面一段代码:


import { verifyLogin,apiLoginOut } from '@/config/mUtils';


这种方法可以,但不是最优,我们完全有能力去优化他。


如果我们需要一个验证本地cookie方法,需要在调用接口方法之前先调用它一次,显然这种方法的弊端就出来了。每次都引用,代码冗余。我们可以将它设置成全局方法。



一、vuejs设置全局方法


1,首先你写好你的方法,比如这个方法叫“verifyLogin”方法;


2,将这个方法在main.js引入


import { verifyLogin } from '@/config/mUtils';


3,在main.js添加如下一句话


Vue.prototype.verifyLogin = verifyLogin;


4,在需要使用这方法的地方,使用“this.verifyLogin”即可



二、vuejs设置全局变量


Vue.prototype.rolesArr = {
    '111': '客户',
    '222': '管理员',
    '333': '老板',
    '444': '客服',
    '555': '销售',
    '666': '运营'
};


同理,在需要使用这变量的地方,使用“this.rolesArr”即可

注:全局变量默认不会缓存


通过以上方法,vuejs可以实现全局方法和全局变量。




×
作者:程成
QQ:492245711