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

上一节:使用mpvue重构个人小程序(七)使用自定义模板

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

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

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

src/mian.js

我的配置文件内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 = {uid: '123456'}
Vue.prototype.globalData = getApp().globalData

放到 app.$mount() 后面。

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

效果图

调用全局变量

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

执行过程

效果图

效果图

改变全局变量的值:

在写留言界面 改变值:this.globalData.test = ‘我已经改变了全局变量测试值’

效果图

返回首页下拉刷新:

效果图

改变成功!

下一节:使用mpvue重构个人小程序(九)下拉刷新

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

https://sunct.github.io/posts/8eb20e20.html

作者

sunct

发布于

2019-04-16

更新于

2020-12-24

许可协议


评论