項目開發(fā)過程中,我們會遇見多個組件的一些方法一樣,那如果每個組件我們都重新將函數(shù)寫一遍,豈不是顯得很浪費時間,那更多的時候我們還是想要將代碼能過復(fù)用,下面我記錄一下我在項目中實現(xiàn)該需求的方式
文件目錄如下:

  |-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里面全局注冊:

//引入功能函數(shù)
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