Defining and using global variables in VUE

Defining and using global variables in VUE

---

1. The two types of problems encountered at work

---

1.1 state values ​​(flag)

A interface assigned a variable value as the recording state (flag) to be used several other interfaces. Several other interface may also change a status value.

Passing the fields 1.2

Interface has a field A, B is not a field in the interface, but needs to be called a field.

2. Solution

---

2.1 VUEX

Use VUEX management state field value, but have a feeling of overkill, slightly noticeable a little heavy.

2.2 management method using the global variable state field value of

Lightweight and simple.
Therefore, this paper uses the global variable method to solve two problems raised 1

3. realization

---

3.1 Creating Global File

In the Tools folder, create glabal_val.js

3.2 Method to create a global variable and the global variable settings are as follows

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

3.3 import data (global variable)

import global from '@/utils/global_val'

3.4 A global variable in interface status bits

global.set_sso_lag(1)

3.5 in the B interface is determined

B in conjunction with the VUE DOM interface tag v-if, v-else-if instruction determination logic

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

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

</div>