VUE 全局变量的几种实现方式


Posted in Javascript onAugust 22, 2018

1、全局变量专用模块

意思是说,用一个模块(js or vue)管理这套全局变量,模块里的变量用export (最好导出的格式为对象,方便在其他地方调用)暴露出去,当其它地方需要使用时,用import 导入该模块

全局变量专用模块Global.vue

const colorList = [
 '#F9F900',
 '#6FB7B7',
]
const colorListLength = 20
function getRandColor () {
 var tem = Math.round(Math.random() * colorListLength)
 return colorList[tem]
}
export default
{
 colorList,
 colorListLength,
 getRandColor
}

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

需要使用全局变量的模块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>

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>

1和2的区别在于:2不用在用到的时候必须按需导入全局模块文件

3、vuex

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

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

Javascript 相关文章推荐
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
jquery获取复选框被选中的值
Apr 10 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
Dec 08 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
js实现全选和全不选
Jul 28 Javascript
js 实现碰撞检测的示例
Oct 28 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 #Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 #Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 #Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 #Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 #Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 #jQuery
js动态设置select下拉菜单的默认选中项实例
Aug 21 #Javascript
You might like
浅析PHP中Collection 类的设计
2013/06/21 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
Django后台admin的使用详解
2019/07/08 Python
django框架ModelForm组件用法详解
2019/12/11 Python
Python运行异常管理解决方案
2020/03/09 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
如何利用Python 进行边缘检测
2020/10/14 Python
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
商务英语本科生的自我评价分享
2013/11/15 职场文书
个人工作主要事迹
2014/05/08 职场文书
安全施工责任书
2014/08/25 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
宣传稿格式范文
2015/07/23 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android