vue public constants and methods


在使用vue的过程中,会遇到一些可以复用或者多次调用的常量以及函数方法,为了减小代码量以及后期的维护,可以将这些常量方法实现共用。

方法有很多,这里记录一种自己比较常用的。

在src文件夹下创建utils文件夹
在utils中新建一个global.js的文件

该文件夹中放入共用的常量以及方法,并export出来,如下

global.js

const emojiArray = ['[微笑]', '[害羞]', '[击掌]', '[握手]', '[爱心]', '[调皮]', '[礼物]', '[派对]', '[嘿哈]', '[悠闲]',
  '[憨笑]', '[太阳]', '[猪头]', '[送心]', '[耶]', '[大笑]', '[小鼓掌]', '[偷笑]', '[愉快]', '[飞吻]', '[呲牙]', '[拳头]', '[发]'
]

function getRandomEmojiIndex() { // 获取随机的emoji表情
  return Math.floor(Math.random() * emojiArray.length) // 可均衡获取 0 到 22 的随机整数。
}

function getRandomEmojiNum() { // 获取添加的emoji表情数量 1-5
  return Math.floor(Math.random() * 5) + 1 // 可均衡获取 1 到 5 的随机整数。
}


// 将方法通过export 让其他组件import访问
export function getEmojiStr() { // 结合上面两个随机方法获得一个emoji字符串
  var emojiStr = ''
  var num = getRandomEmojiNum()
  console.log('num:', num)
  for (var i = 0; i < num; i++) {
    var index = getRandomEmojiIndex()
    console.log('index:', index)
    emojiStr = emojiStr + emojiArray[index]
  }
  return emojiStr
}

// 我这个项目中没用到这个,所以注释。
// 将常量通过export 让其他组件import访问
// export default {
//   emojiArray
// }
组件中import常量或者方法
import { getEmojiStr } from '@/utils/global'
组件中使用该常量或者方法
var emojiStr = getEmojiStr()
console.log(emojiStr)

文章作者: wsh
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 wsh !
  目录