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 相关文章推荐
Node调试工具JSHint的安装及配置教程
May 27 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
vue中注册自定义的全局js方法
Nov 15 Javascript
Vue使用v-viewer实现图片预览
Oct 21 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
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
PHP和.net中des加解密的实现方法
2013/02/27 PHP
php字符集转换
2017/01/23 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
angularJS开发注意事项
2018/05/26 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
django foreignkey(外键)的实现
2019/07/29 Python
利用python画出AUC曲线的实例
2020/02/28 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
python实现最短路径的实例方法
2020/07/19 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
python中altair可视化库实例用法
2021/01/26 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
干部现实表现材料
2014/02/13 职场文书
《草原》教学反思
2014/02/15 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle