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下利用fso判断文件是否存在的代码
Dec 11 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
深入理解javascript的执行顺序
Apr 04 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
关于JavaScript命名空间的一些心得
Jun 07 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 Javascript
0基础学习前端开发的一些建议
Jul 14 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下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
python批量提取word内信息
2015/08/09 Python
儿童学习python的一些小技巧
2018/05/27 Python
python批量修改图片大小的方法
2018/07/24 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
python web框架 django wsgi原理解析
2019/08/20 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
11月红领巾广播稿
2014/01/17 职场文书
初中英语教学反思
2014/01/25 职场文书
爱护公共设施的标语
2014/06/24 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
周年庆典答谢词
2015/01/20 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis