VUE中全局變量的定義和使用

目錄

• VUE中全局變量的定義和使用
• 1.工做中遇到的兩類問題
  • 1.1 狀態值（標誌）
  • 1.2 傳遞字段
• 2.解決方法
  • 2.1 VUEX
  • 2.2 使用全局變量法管理狀態與字段值
• 3.具體實現
  • 3.1建立全局文件
  • 3.2建立全局變量和設置全局變量的方法以下
  • 3.3導入數據（全局變量）
  • 3.4在 A界面設置全局變量的狀態位
  • 3.5在B界面判斷

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

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>