vue里面的全局功能函数

项目开发过程中,我们会遇见多个组件的一些方法一样,那如果每个组件我们都重新将函数写一遍,岂不是显得很浪费时间,那更多的时候我们还是想要将代码能过复用,下面我记录一下我在项目中实现该需求的方式
文件目录如下:

  |-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