背景:在.vue
后缀名的文件,和.js
后缀名的文件里,使用全局变量的语法是不一样的。
.vue
模板文件可以直接访问挂载在Vue实例上的全局对象,而普通的.js
文件访问不到。
1、 定义全局变量
const ssoServer = "https://iam.by.gov.cn/idp"; // 生产环境
const ssoServerLogout = "https://iam.by.gov.cn/apphub/logout"; // 生产环境
export default
{
ssoServer,
ssoServerLogout
}
我这里定义的是常量。变量只是把const换成let,别的都一样。
2、挂载全局变量,main.js是Vue项目的入口文件,在main.js里面把全局变量挂载到Vue实例上。
import global_ from './config/Global' // 这个路径是相对于main.js的相对路径
Vue.prototype.GLOBAL = global_
3、访问全局变量
3.1 通过Vue.prototype对象访问
import Vue from 'vue'
let a = Vue.prototype.GLOBAL.ssoServer
这种写法在.vue文件和.js文件中都可以使用。
3.2 通过this关键字访问
let a = this.GLOBAL.ssoServer
这种写法只能在.vue文件中使用。
.vue
模板文件中,this
关键字可以访问到Vue.prototype
上挂载的所有对象,所以写this
就相当于写Vue.prototype
。
4、定义全局方法
在任意.js文件里使用export function语法,即可让这个方法变成全局方法。
export function 个人号码加密 (号码) {
let length = 号码.length
if (length < 8) return 号码
let 开始加密位 = length / 2 - length / 5
let 结束加密位 = 开始加密位 + length / 3
let 加密位数 = 结束加密位 - 开始加密位 + 1
let 加密结果 = 号码.substring(0, 开始加密位)
for (let i = 0; i < 加密位数; i++) {
加密结果 += '*'
}
加密结果 += 号码.substring(结束加密位, length)
return 加密结果
}
5、使用全局方法
在别的.js和.vue文件里面都可以调用到。调用语法是一样的。
import * as common from '@/utils/common'
// @/utils为路径, common为js文件名
let 身份证号码 = "44132319960617502X"
let 身份证号码加密 = common.个人号码加密(身份证号码)