Vue3.0中全局⽅法和全局属性的最佳实践
在Vue3.0中推荐⽤TS编码, TS中不能直接使⽤tools.js中的全局⽅法或全局属性
⼀般在Vue3.0中使⽤全局⽅法有如下两种⽅案
⽅案⼀ 使⽤ fig.globalProperties
⽅案⼆ 通过依赖和注⼊(provide 和 inject)来完成
但是这两种⽅法使⽤起来都⾮常的不⽅便
推荐如下⽅案
1.先吧全局⽅法和全局属性写到Json对象中
tools.js
const tools = {
//判断对象，数组，字符串等是否为空(null或者⽆数据，空字符串等) 使⽤举例: tools.isNull(object)
isNull: function (obj) {
let str = String(obj)
if (str === 'undefined' || str === 'null' || str === '' || !str || !/[^\s]/.test(str)) {
return true
}
if (typeof obj === 'object') {
let json = JSON.stringify(obj)
if (json === '{}') {
return true
}
if (json === '[]') {
return true
vuejson转对象}
return false
} else {
return false
}
},
// 控制台⽇志,⽀持传⼀个参数(对象/字符串), 也⽀持传两个参数(标志,⽇志消息<；可以是对象，可以是字符串>) , 使⽤举例: tools.clog("flag",object)
clog: function (flag, value = 'xxxxxxxxxxxxxxxxxxx=Default-value_override+xxxxxxxxxxxxxxxxx') {
try {
// 如果value为默认值，则没有传递第⼆个参数，只处理第⼀个参数
if (value === `xxxxxxxxxxxxxxxxxxx=Default-value_override+xxxxxxxxxxxxxxxxx`) {
let tmp = JSON.stringify(flag);
console.log(tmp)
} else if (isNull(value)) {
let tmp = JSON.stringify(flag);
console.log(tmp + ":")
} else if (isNull(flag)) {
let tmp = JSON.stringify(value);
console.log(":" + tmp)
} else {
let tmp = JSON.stringify(value);
console.log(flag + ":" + tmp)
}
} catch (err) {
console.log("log", err)
}
},
// 导⼊所有组件
//使⽤⽅法 components: t('./', false, /Yi.*\.vue$/)),  // 导⼊当前⽬录以"Yi" 开头，以".vue"结尾的全部组件
//解释: t('./components', false, /Yi.*\.vue$/) : webpack的⽅法, 第⼀个参数为⽂件路径, 第⼆个参数为是否包含⼦⽂件夹, 第三个参数为正则  importComponents: function (comps) {
let res_components = {}
comps.keys().forEach((fileName) => {
let comp = comps(fileName)
let comp = comps(fileName)
res_place(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
})
return res_components
},
//获取当前时间, 出参为格式化后的⽇期字符串
timeNow: function () {
var time = new Date();  // 程序计时的⽉从0开始取值后+1
var m = Month() + 1;
var t = FullYear() + "-" + m + "-" + Date() + " " + Hours() + ":" + Minutes() + ":" + Seconds();    return t;
},
//⼀天的开始, ⼊参为Date类型, 出参为格式化后的⽇期字符串
timeDayBegin: function (time) {
var m = Month() + 1;
var t = FullYear() + "-" + m + "-" + Date() + " 00:00:00";
return t;
},
//⼀天的结束, ⼊参为Date类型, 出参为格式化后的⽇期字符串
timeDayEnd: function (time) {
var m = Month() + 1;
var t = FullYear() + "-" + m + "-" + Date() + " 23:59:59";
return t;
},
//字符串数组转整型数字数组
strArr2IntArr: function (arrStr) {
for (var i = 0; i < arrStr.length; i++) {
arrStr[i] = parseFloat(arrStr[i])
}
return arrStr;
}
}
全局属性\静态配置⽂件
config.js
const config= {
baseApiUrl: "192.186.1.1"
}
2.在Index.html中引⼊
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="tools.js"></script>
3.在TS中按如下⽅式使⽤
<template>
<div class="home">
<h1>⾸页</h1>
<el-button @click="test">test</el-button>  </div>
</template>
<script lang="ts">
declare const tools: any //引⼊tools对象
export default {
setup() {
const test = () => {
tools.clog(`test`)
if (tools.isNull([])) {
tools.clog(`[]isNull`)
} else {
tools.clog(`[]Not Null`)
}
if (tools.isNull([1])) {
tools.clog(`[1]isNull`)
} else {
tools.clog(`[1]Not Null`)
}
}
return {
test
}
}
}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。