详解VUE 定义全局变量的几种实现方式


Posted in Javascript onJune 01, 2017

最近在学习VUE.js 中间涉及到JS全局变量,与其说是VUE的全局变量,不如说是模块化JS开发的全局变量。

1、全局变量专用模块

就是以一个特定模块来组织管理这些全局量,需要引用的地方导入该模块便好。

全局变量专用模块 Global.vue

<script type="text/javascript">
const colorList = [
 '#F9F900',
 '#6FB7B7',
 '#9999CC',
 '#B766AD',
 '#B87070',
 '#FF8F59',
 '#FFAF60',
 '#FFDC35',
 '#FFFF37',
 '#B7FF4A',
 '#28FF28',
 '#1AFD9C',
 '#00FFFF',
 '#2894FF',
 '#6A6AFF',
 '#BE77FF',
 '#FF77FF',
 '#FF79BC',
 '#FF2D2D',
 '#ADADAD'
]
const colorListLength = 20
function getRandColor () {
 var tem = Math.round(Math.random() * colorListLength)
 return colorList[tem]
}
export default
{
 colorList,
 colorListLength,
 getRandColor
}
</script>

模块里的变量用export 暴露出去,当其它地方需要使用时,引入模块global便可。

需要使用全局变量的模块 html5.vue

<template>
 <ul>
  <template v-for="item in mainList">
   <div class="projectItem" :style="'box-shadow:1px 1px 10px '+ getColor()">
     <router-link :to="'project/'+item.id">
      ![](item.img)
      <span>{{item.title}}</span>
     </router-link>
   </div>
  </template>
 </ul>
</template>
<script type="text/javascript">
import global_ from 'components/tool/Global'
export default {
 data () {
  return {
   getColor: global_.getRandColor,
   mainList: [
    {
     id: 1,
     img: require('../../assets/rankIcon.png'),
     title: '登录界面'
    },
    {
     id: 2,
     img: require('../../assets/rankIndex.png'),
     title: '主页'
    }
   ]
  }
 }
}
</script>
<style scoped type="text/css">
.projectItem
{
 margin: 5px;
 width: 200px;
 height: 120px;
 /*border:1px soild;*/
 box-shadow: 1px 1px 10px;
}
.projectItem a
{
 min-width: 200px;
}
.projectItem a span
{
 text-align: center;
 display: block;
}
</style>

2、全局变量模块挂载到Vue.prototype 里。

Global.js同上,在程序入口的main.js里加下面代码

import global_ from './components/tool/Global'
Vue.prototype.GLOBAL = global_

挂载之后,在需要引用全局量的模块处,不需再导入全局量模块,直接用this就可以引用了,如下:

<script type="text/javascript">
export default {
 data () {
  return {
   getColor: this.GLOBAL.getRandColor,
   mainList: [
    {
     id: 1,
     img: require('../../assets/rankIcon.png'),
     title: '登录界面'
    },
    {
     id: 2,
     img: require('../../assets/rankIndex.png'),
     title: '主页'
    }
   ]
  }
 }
}
</script>

3、使用VUEX

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。因此可以存放着全局量。因Vuex有点繁琐,有点杀鸡用牛刀的感觉。认为并没有必要。

链接:vuex官方介绍

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 Javascript
javascript中如何判断类型汇总
May 14 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
Aug 22 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 #Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 #Javascript
js随机生成一个验证码
Jun 01 #Javascript
JS实现简单抖动效果
Jun 01 #Javascript
深入理解vue中的$set
Jun 01 #Javascript
详解angular中的作用域及继承
May 31 #Javascript
Node学习记录之cluster模块
May 31 #Javascript
You might like
php生成缩略图的类代码
2008/10/02 PHP
xml在joomla表单中的应用详解分享
2012/07/19 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
Python中operator模块的操作符使用示例总结
2016/06/28 Python
python数据归一化及三种方法详解
2019/08/06 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
法律专业应届本科毕业生求职信
2013/10/25 职场文书
化妆品促销方案
2014/02/24 职场文书
党员一句话承诺大全
2014/03/28 职场文书
投资意向书范本
2014/04/01 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
JavaScript 实现页面滚动动画
2021/04/24 Javascript