vue项目中，定义并使用全局变量，全局函数

清疚 2023-10-11 14:27 4阅读 0赞

**原理：**  
1. 单独新建一个全局变量模块文件，模块中定义一些变量初始状态，用export default 暴露出去。  
2. 在main.js中引入，并通过Vue.prototype挂载到vue实例上面。供其他模块文件使用；  
3. 或者直接引入到需要的模块文件中使用；

**项目目录**  
![这里写图片描述][70]

**步骤1、新建 `global_variable.js`文件，用于存放变量，示例如下：**

const baseURL = 'www.baidu.com'
    const token = '123456'
    const userSite = '林花落了春红，太匆匆'
    
    export default {
      baseURL,
      token,
      userSite
    }

*  **方法1：在需要使用的模块文件中使用（局部引用），示例如下**

![这里写图片描述][70 1]

*  **方法2：全局使用，示例如下：**

1、将`global_variable.js`文件引入main.js文件，并使用Vue.prototype挂在至vue实例上，示例如下：  
![这里写图片描述][70 2]

2、在需要使用的模块文件中使用(无需引入，直接通过`this`使用)，示例如下：

![这里写图片描述][70 3]

--------------------

> **二、定义函数，并全局使用**

**原理：**

新建一个模块文件，然后在main.js里面通过Vue.prototype将函数挂载到Vue实例上面，通过this.输出的函数名，来运行函数。

--------------------

*  **方法1. 在main.js里面直接写函数**

简单的函数可以直接在main.js里面直接写，示例如下：  
![这里写图片描述][70 4]

--------------------

*  **方法2. 新建一个模块文件，挂载到main.js上面**

项目目录如下  
![这里写图片描述][70 5]

1、`global_func.js`文件中代码示例如下：

// param为传入参数
    function packageFunc (param) {
      alert(param)
    }
    
    export default {
      // Vue.js的插件应当有一个公开方法 install。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。
      install: function (Vue) {
        Vue.prototype.global_func = (param) => packageFunc(param)
      }
    }

2、`main.js`文件中代码示例如下：  
![这里写图片描述][70 6]

3、在需要调用的模块文件中使用`this.输出的函数名`，调用，代码示例如下：  
![这里写图片描述][70 7]

**1、在main.js文件直接定义方法**

简单的函数可以直接写在`main.js`文件里定义。

// 将方法挂载到vue原型上
    Vue.prototype.changeData = function (){
      alert('执行成功');
    }

使用的时候组件里直接调用。

//直接通过this运行函数，这里this是vue实例对象
    this.changeData();

**2、使用全局函数专用模块，挂载到main.js上面**

`base.js`文件，文件位置可以放在跟`main.js`同一级，方便引用（这点可以依据个人习惯决定）。

exports.install = function (Vue, options) {
        Vue.prototype.changeData = function (){
            alert('执行成功');
        };
    };

`main.js`引入并使用。

import base from './base'
    Vue.use(base);

所有的组件里就可以调用该函数。

this.changeData();

全局方法调用

新建一个`global_func.js`文件中代码示例如下：

export default {
        // Vue.js的插件应当有一个公开方法 install。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。
        install: function (Vue) {
            // 挂载到vue原型上，暴露四个方法
            Vue.prototype.$AllFun = {
                info(text) {
                    if (!text) return
                    console.log('info', text)
                },
                success(text) {
                    if (!text) return
                    console.log('success', text)
                },
                error(text) {
                    if (!text) return
                    console.log('error', text)
                },
                warning(text) {
                    if (!text) return
                    console.log('warning', text)
                }
            }
        }
    }

在main.js中引入并使用。

import globalAllFunc from "@/utils/global\_allFunc";

Vue.use(globalAllFunc);

所有的组件里就可以调用该函数。

// 多个全局方法的使用

this.$AllFun.success("成功消息");

[70]: https://img-blog.csdn.net/20180815160749836?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjY5ODMz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20180815161336465?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjY5ODMz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: https://img-blog.csdn.net/20180815161857539?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjY5ODMz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: https://img-blog.csdn.net/20180815162057780?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjY5ODMz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 4]: https://img-blog.csdn.net/20180815163757482?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjY5ODMz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 5]: https://img-blog.csdn.net/20180815170055842?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjY5ODMz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 6]: https://img-blog.csdn.net/2018081517050339?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjY5ODMz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 7]: https://img-blog.csdn.net/20180815170901809?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjY5ODMz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70