详解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 相关文章推荐
JavaScript使用prototype定义对象类型
Feb 07 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
javascript显式类型转换实例分析
Apr 25 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
关于layui 下拉列表的change事件详解
Sep 20 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 a simple smtp class
2007/11/26 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
javascript全局变量封装模块实现代码
2012/11/28 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
vue生命周期的探索
2019/04/03 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
python中的字典详细介绍
2014/09/18 Python
python实现简单温度转换的方法
2015/03/13 Python
python threading模块操作多线程介绍
2015/04/08 Python
Python编程之序列操作实例详解
2017/07/22 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
python 贪心算法的实现
2020/09/18 Python
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
数据库基础的一些面试题
2012/02/25 面试题
应用电子专业学生的自我评价
2013/10/16 职场文书
大学生创业计划书的格式要求
2013/12/29 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
环境卫生标语
2015/08/03 职场文书