有你,世界才更有趣!

使用mpvue重构个人小程序(八)使用全局变量

在开发的过程中,用到全局变量的问题,搜了很多,方法五花八门,有的推荐使用vuex ,如果你想折腾一番可以自己尝试的使用。

下面,我用的是最原始的方式来介绍一下全局变量的使用方法。

首先,在配置文件src / mian.js 中进行开启和全局配置。

《使用mpvue重构个人小程序(八)使用全局变量》

我的配置文件内容:

import Vue from 'vue'
import App from './App'
import 'mpvue-calendar/src/style.css'
Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue(App)
app.$mount()
getApp().globalData = {uid: '123456'}
Vue.prototype.globalData = getApp().globalData

放到 app.$mount() 后面。

为了直观的配置,先给getApp().globalData 赋值。再给Vue.prototype.globalData,当然,你也可以直接赋值给Vue.prototype.globalData。效果一样。

《使用mpvue重构个人小程序(八)使用全局变量》

调用全局变量

使用 this.globalData.uid 调用即可。小程序重新编译:

执行过程

《使用mpvue重构个人小程序(八)使用全局变量》
《使用mpvue重构个人小程序(八)使用全局变量》

改变全局变量的值:

在写留言界面 改变值:this.globalData.test = '我已经改变了全局变量测试值'
《使用mpvue重构个人小程序(八)使用全局变量》

返回首页下拉刷新:

《使用mpvue重构个人小程序(八)使用全局变量》

改变成功!

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注