详解VUE 定义全局变量的几种实现方式

时间:2021-05-25

最近在学习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 = 20function 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; 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官方介绍

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章