写在前面：
如题，在项目中，经常有些函数和变量是需要复用，比如说网站服务器地址，从后台拿到的：用户的登录token,用户的地址信息等，这时候就需要设置一波全局变量和全局函数，这两个设置不太难，而且有一些共通之处，可能有一些朋友对此不太了解，所以随便写出来分享一波。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。
定义全局变量
原理：
设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用export default 暴露出去，在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。
全局变量模块文
在Vue项目中，全局变量和全局函数的定义是提高代码复用性和组织效率的重要手段。以下将详细讲解如何实现这两个功能。
### 定义全局变量
#### 原理
创建一个专门的全局变量模块文件，例如`Global.vue`，在其中定义所需的变量并用`export default`导出。然后在`main.js`中，通过`Vue.prototype`将这些变量挂载到Vue实例上，以便在任何组件中都可以访问。
#### 实现步骤
1. 创建`Global.vue`文件：
```html
<script>
const serverSrc = 'www.baidu.com';
const token = '12345678';
const hasEnter = false;
const userSite = "中国钓鱼岛";
export default {
userSite,
token,
serverSrc,
hasEnter
}
</script>
```
2. 使用全局变量：
- 方式1：在需要使用全局变量的组件中，导入`Global.vue`，然后通过`global_`访问变量。
```javascript
import global_ from '../../components/Global'
export default {
name: 'text',
data() {
return {
token: global_.token
}
}
}
```
- 方式2：在`main.js`中挂载`Global.vue`到`Vue.prototype`。
```javascript
import global_ from './components/Global'
Vue.prototype.GLOBAL = global_
```
在任何组件中，你可以直接通过`this.GLOBAL`访问全局变量。
### 定义全局函数
#### 原理
新建一个模块文件，比如`base.js`，然后在`main.js`中通过`Vue.prototype`将函数挂载到Vue实例上，通过`this.函数名`来调用。
#### 实现步骤
1. 创建`base.js`文件：
```javascript
exports.install = function(Vue, options) {
Vue.prototype.text1 = function() {
alert('执行成功1');
};
Vue.prototype.text2 = function() {
alert('执行成功2');
};
};
```
2. 在`main.js`中引入并注册全局函数：
```javascript
import base from './base'
Vue.use(base);
```
3. 在组件中调用全局函数：
```javascript
export default {
name: 'text',
methods: {
callGlobalFunctions() {
this.text1();
this.text2();
}
}
}
```
### 使用Vuex管理全局状态
除了使用`Vue.prototype`，还可以利用Vuex来管理全局状态。Vuex是一个专为Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。要使用Vuex，你需要创建一个store，并在其中定义状态、 mutations、actions和getters，然后在`main.js`中引入和使用。
### 结语
以上就是如何在Vue项目中定义和使用全局变量和全局函数的方法。这些全局资源不仅限于Vue项目，它们可以应用于任何基于JavaScript的前端框架。通过合理地使用全局变量和函数，可以有效减少代码重复，提升项目的可维护性和扩展性。
- 1
- 2
前往页