详解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 getElementsByClassName函数
Apr 01 Javascript
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
JavaScript异步加载问题总结
Feb 17 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
JS求解两数之和算法详解
Apr 28 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检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
Javascript 篱式条件判断
2008/08/22 Javascript
JavaScript库 开发规则
2009/01/31 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
Python实现端口复用实例代码
2014/07/03 Python
python实现自动重启本程序的方法
2015/07/09 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
Django生成PDF文档显示在网页上以及解决PDF中文显示乱码的问题
2019/07/04 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
大学生创业计划书的格式要求
2013/12/29 职场文书
优秀实习生感言
2014/03/01 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
大学班级计划书
2014/04/29 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
工作检讨书范文
2015/01/23 职场文书