项目开发过程中,我们会遇见多个组件的一些方法一样,那如果每个组件我们都重新将函数写一遍,岂不是显得很浪费时间,那更多的时候我们还是想要将代码能过复用,下面我记录一下我在项目中实现该需求的方式
文件目录如下:
|-src
|-compatible
| index.js
| getUserInfor.js
image.png
getUserInfo.js用来获取本地用户信息:
//获取用户本地信息
const getUserInfo = function(){
let local_name = window.localStorage.user_name?window.localStorage.user_name:'xx';
let local_token = window.localStorage.user_token? window.localStorage.user_token:'asqdwf';
let local_language = window.localStorage.user_languege?window.localStorage.user_languege:'zh_CN';
return{
userLanguage: local_language,
userLoginName: local_name,
userToken: local_token
}
}
export default getUserInfo;
image.png
在main.js里面全局注册:
//引入功能函数
import compatible from './compatible'
Object.keys(compatible).forEach( key => Vue.prototype[`$${key}`] = compatible[key] )
image.png
在组件里面使用就可以像下面这样了:
created(){
let user = this.$getUserInfo();
console.log(user)
}
image.png
网友评论