欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-29 07:57:22
[toc] VUE中全局变量的定义和使用 1.工作中遇到的两类问题 1.1 状态值(标志) A界面赋值的a变量,作为记录状态值(标志)需要被其他几个界面使用。其他几个界面亦可以改变a状态值。 1.2 传递字段 A界面有a字段,B界面没有a字段,但需要调用a字段。 2.解决方法 2.1 VUEX 使用 ......

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


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
VUE中全局变量的定义和使用

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>