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 相关文章推荐
javascript 新浪背投广告实现代码
Jul 07 Javascript
jquery 使用简明教程
Mar 05 Javascript
js强制把网址设为默认首页
Sep 29 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
js实现烟花特效
Mar 02 Javascript
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
详解使用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使用redis位图bitMap 实现签到功能
2019/10/08 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
Python列表(List)知识点总结
2019/02/18 Python
深入理解Django-Signals信号量
2019/02/19 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
python自动生成model文件过程详解
2019/11/02 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
EJB实例的生命周期
2016/10/28 面试题
商务日语专业毕业生求职信
2013/10/26 职场文书
学校经典推荐信
2013/10/30 职场文书
酒店员工职业生涯规划
2014/02/25 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
公司周年庆典致辞
2015/07/30 职场文书
Django如何创作一个简单的最小程序
2021/05/12 Python
vue如何清除浏览器历史栈
2022/05/25 Vue.js
springboot读取resources下文件的方式详解
2022/06/21 Java/Android