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的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
文档对象模型DOM通俗讲解
Nov 01 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 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中GET变量的使用
2006/10/09 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
jQuery 连续列表实现代码
2009/12/21 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
python中sleep函数用法实例分析
2015/04/29 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
Python算法之图的遍历
2017/11/16 Python
TensorFlow实现Logistic回归
2018/09/07 Python
Python内置加密模块用法解析
2019/11/25 Python
Python中os模块功能与用法详解
2020/02/26 Python
幼儿园教师节活动方案
2014/02/02 职场文书
求职毕业生自荐书
2014/02/08 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
复兴之路展览观后感
2015/06/02 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书