vuex存放全局变量 uniapp：全局变量的几种实现方式

01

uniapp：全局变量的几种实现方式

在开发过程中，我们不可避免地会用到全局变量，比如我们请求的公共路径变量； 那么我们可以通过哪些方式在uniapp中实现全局变量

1. 模块

我们可以在项目中新建一个js文件，定义一个专门的模块来管理全局变量，并在需要的地方引入！

比如我在项目根目录下新建了一个config.js，写入如下代码

export const baseUrl = "https://www.baidu.com/"

在页面中使用即可，如下

<script>import { baseUrl } from '@/config.js';export default {  onLoad() {    console.log(baseUrl);  }};</script>

其实我觉得这种维护还是比较方便的，但是缺点就是如果我们需要使用的话，需要引入…

2.Vue.prototype

用过vue的人都知道，我们可以把项目中用到的变量和方法挂在vue.prototype上，每个vue对象都会继承这些方法变量。

使用：main.js

Vue.prototype.$baseUrl = "https://www.baidu.com/"

页面调用：

onLoad() {  console.log(this.$baseUrl);},

建议：可以为Vue.prototype上挂载的属性或方法添加统一的前缀。 例如$url和global_url让我们在阅读代码时更容易理解这个变量是挂载在vue.prototype上的。

3.全局数据

说起这个globalData，如果你是第一次写uniapp项目，你可能没有听说过，但只要你写过原生小程序，这个概念其实并不陌生。 uniapp后端也兼容这个东西，可以在app、h5、小程序中使用globalData全局变量。 使用方法如下：

应用程序.vue

export default {  globalData: {    baseUrl: 'https://www.baidu.com/'  },  onLaunch: function() {    console.log('App Launch');  },  onShow: function() {    console.log('App Show');  },  onHide: function() {    console.log('App Hide');  }};</script>

使用：

  onLoad() {    // getApp().globalData.baseUrl = 'xxx'    console.log(getApp().globalData.baseUrl);  },

globalData 适合较小的项目。 一旦涉及到更大更复杂的项目，我建议不要使用它。 感觉不太好用。 0.0

4.vuex

这件事无需多说。 是vue全家桶之一，也是必备技能。

一般来说，项目建议使用模块来存储我们的一些全局变量和默认配置项vuex存放全局变量，在vue.prototype中挂载常用的功能vuex存放全局变量，如模态框、反向搜索字典等，并使用vuex进行全局状态管理；