vue封装方法以及常用的方法

1，新建api.js

let api={

set(){

console.log('set')

},

get(){

console.log('get')

},

post(){

console.log('post')

}

}

export default api

---

2，在组件中引入

importapifrom'@/api'

3，使用api

created:function(){

api.get() //打印出get

},

---

export跟export default 有什么区别呢？

1、export与export default均可用于导出常量、函数、文件、模块等

2、你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用

3、在一个文件或模块中，export、import可以有多个，export default仅有一个

4、通过export方式导出，在导入时要加{ }，export default则不需要

通过export方式导出，在导入时要加{ }，export default则不需要。使用export default命令，为模块指定默认输出

---

上代码吧util文件下面的index.js

// 防抖函数
function debounce (fn, wait) {
    let t
    return () => {
      let context = this
      let args = arguments
      if (t) clearTimeout(t)
      t = setTimeout(() => {
        fn.apply(context, args)
      }, wait)
    }
  }
  function flatten (arr) { // 数组扁平化
    return arr.reduce((result, item) => {
      return result.concat(Array.isArray(item) ? flatten(item) : item)
    }, [])
  }
  function handleMulitePerson (sPerson) {
    console.log(44, sPerson.split(','))
    if (typeof sPerson === 'string') {
      let personArr = []
      sPerson.split(',').forEach(item => {
        let obj = { userCode: item.split('/')[0], userName: item.split('/')[1] }
        personArr.push(obj)
      })
      return personArr
    }
  }

  function uniqueArray (array, key) { // json数组根据key去重
    var result = [array[0]]
    for (var i = 1; i < array.length; i++) {
      var item = array[i]
      var repeat = false
      for (var j = 0; j < result.length; j++) {
        if (item[key] === result[j][key]) {
          repeat = true
          break
        }
      }
      if (!repeat) {
        result.push(item)
      }
    }
    return result
  }
  function setSessionStorage (key, val) {
    if (typeof (val) === 'object') {
      sessionStorage.setItem(key, JSON.stringify(val))
    } else {
      sessionStorage.setItem(key, val)
    }
  }
  function getSessionStorage (key) {
    return sessionStorage.getItem(key)
  }
  function removeStorage (key) {
    sessionStorage.removeItem(key)
  }

  function urlParams () { // 获取链接参数
    var str = location.search.length > 0 ? location.search.substring(1) : ''
    var items = str.length ? str.split('&') : []
    var args = {}
    var item = null
    var name = null
    var value = null
    for (let i = 0, len = items.length; i < len; i++) {
      item = items[i].split('=')
      name = decodeURIComponent(item[0])
      value = decodeURIComponent(item[1])
      if (name.length) {
        args[name] = value
      }
    };
    return args
  }

  function urlAfterParams () {
    var str = window.location.hash.length > 0 ? window.location.hash.substring(window.location.hash.indexOf('?') + 1) : ''
    var items = str.indexOf('&') > 0 ? str.split('&') : str.split('?')
    var args = {}
    var item = null
    var name = null
    var value = null
    for (let i = 0, len = items.length; i < len; i++) {
      item = items[i].split('=')
      name = decodeURIComponent(item[0])
      value = decodeURIComponent(item[1])
      if (name.length) {
        args[name] = value
      }
    };
    return args
  }

  function parseParams (url) {
    url = decodeURIComponent(url)
    var params = {}
    var idx = url.indexOf('?')
    if (idx > 0) {
      var queryStr = url.substring(idx + 1)
      if (queryStr.length > 0) {
        var arr = queryStr.split('&')
        for (let i = 0; i < arr.length; i++) {
          var pair = arr[i].split('=')
          if (pair.length === 2 && pair[0].length > 0) {
            params[pair[0]] = pair[1]
          }
        }
      }
    }
    return params
  }

  /**
   * 选人下拉框数据:username(userCode)
   */
  function getSelectUserName (userName, userCode) {
    return userName + '(' + userCode + ')'
  }

  function getSelectLoginUser () {
    var userInfo = getLoginUserInfo()
    return getSelectUserName(userInfo.userName, userInfo.userId)
  }

  function getUserNameBySelectUserName (userName) {
    let i = userName.indexOf('(')
    return userName.substring(0, i)
  }

  /**
   * 登录用户信息
   * userId
   * userName
   * mobileNo
   * @returns {any}
   */
  function getLoginUserInfo () {
    return JSON.parse(localStorage.getItem('userInfo'))
  }

  function getLoginUserCode () {
    return JSON.parse(localStorage.getItem('userInfo')).userId
  }

// 数字四舍五入（保留n位小数）
  function round (number, n) {
    n = n ? parseInt(n) : 0
    if (n <= 0) return Math.round(number)
    number = Math.round(number * Math.pow(10, n)) / Math.pow(10, n)
    return number
}

  export default {
    setSessionStorage,
    urlParams,
    urlAfterParams,
    parseParams,
    debounce,
    handleMulitePerson,
    uniqueArray,
    flatten,
    getSessionStorage,
    removeStorage,
    getSelectUserName,
    getSelectLoginUser,
    getLoginUserInfo,
    getLoginUserCode,
    getUserNameBySelectUserName,
    round
  }

vue组件中使用

image.png

---

老哥的做成了模块化到处工具，根据项目而定
https://www.cnblogs.com/yuwenjing0727/p/9230381.html