Vue中全局变量的定义和使用


Posted in Javascript onJune 05, 2019

1.工作中遇到的两类问题

--------------------------------------------------------------------------------

1.1 状态值(标志)

A界面赋值的a变量,作为记录状态值(标志)需要被其他几个界面使用。其他几个界面亦可以改变a状态值。

1.2 传递字段

A界面有a字段,B界面没有a字段,但需要调用a字段。

2.解决方法

--------------------------------------------------------------------------------

2.1 VUEX

使用VUEX管理状态与字段值,但有种杀鸡用牛刀的感觉,稍微显重了一点。

2.2 使用全局变量法管理状态与字段值

轻量,简单。
故本文使用全局变量法解决1中提出的两个问题

3.具体实现

--------------------------------------------------------------------------------

3.1创建全局文件

在工具文件夹,创建glabal_val.js

3.2创建全局变量和设置全局变量的方法如下

export default{
 sso_flag:"0",
 set_sso_lag(sso_flag){
   this.sso_flag = sso_flag;
 }
}

3.3导入数据(全局变量)

import global from '@/utils/global_val'

3.4在 A界面设置全局变量的状态位

global.set_sso_flag(1)
也可global.set_sso_flag=this.sso_flag直接进行赋值

3.5在B界面判断

在B界面DOM 标签里结合VUE的v-if,v-else-if指令进行逻辑判断

<div v-if="global.sso_flag==0">
</div>
<div v-else-if="global.sso_flag==1">
</div>

总结

以上所述是小编给大家介绍的VUE中全局变量的定义和使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js几个不错的函数 $$()
Oct 09 Javascript
JavaScript 函数式编程的原理
Oct 16 Javascript
js 数组实现一个类似ruby的迭代器
Oct 27 Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 Javascript
JSONP 跨域共享信息
Aug 16 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
JQUERY 设置SELECT选中项代码
Feb 07 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
Vue实现星级评价效果实例详解
Dec 30 Javascript
element中的$confirm的使用
Apr 26 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 Javascript
详解express使用vue-router的history踩坑
Jun 05 #Javascript
laravel-admin 与 vue 结合使用实例代码详解
Jun 04 #Javascript
用webpack4开发小程序的实现方法
Jun 04 #Javascript
JS实现的对象去重功能示例
Jun 04 #Javascript
JS数组中对象去重操作示例
Jun 04 #Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 #jQuery
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 #Javascript
You might like
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
CodeIgniter基本配置详细介绍
2013/11/12 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
offsetParent 算法分析
2010/04/05 Javascript
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
Python构造函数及解构函数介绍
2015/02/26 Python
python实现文本文件合并
2015/12/29 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
Python 读取位于包中的数据文件
2020/08/07 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
老师对学生的评语
2014/04/18 职场文书
大跃进口号
2014/06/16 职场文书
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL