文章参考

1. uni-app 全局变量的几种实现方式
2. uni-app多种设置全局变量及全局变量重新赋值

微信小程序全局变量

App({
	//当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
	onLaunch: function () {
	},
	// 当小程序启动，或从后台进入前台显示，会触发 onShow
	onShow: function (options) {
	},
	//  当小程序从前台进入后台，会触发 onHide
	onHide: function () {
	},
	// 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
	onError: function (msg) {
	}，
	//全局变量
	globalData：{
	    userInfo：null
    }
})

App.js 定义全局变量

// 引入高德地图js
const amap = require('./src/js/amap-wx.js');
// 引入接口js
const urlList = require('./src/js/config.js');
// 引入wetoast插件js
const { WeToast } = require('./src/wetoast/wetoast.js');
// 全局变量高德地图key
const key = 'c290b7e016c85e8f279b2f80018c';
// 全局变量服务电话
const phone = '400-007-859';

App({
  globalData: {//全局变量
    amap: amap,
    key: key,
    phone: phone,
    urlList: urlList.urlList
  }
})

逻辑页面引入定义好的全局变量

//在page页面引入app，同时声明变量，获得所需要的全局变量
const app = getApp();
const urlList = app.globalData.urlList;

uni-app多种设置全局变量及全局变量重新赋值

1. 定义全局变量，放到 globalData.js中

var globalData = {
	appname: 'yifeng'
}
export default globalData;

2. 在main.js中，将全局变量设置为vue对象的一个属性

import Vue from 'vue'
import App from './App'
import api from '@/common/js/vmeitime-http/'
import globalData from '@/common/js/globalData.js'

Vue.config.productionTip = false
Vue.prototype.$api = api
Vue.prototype.globalData = globalData;

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

3. 定义方法，改变全局变量的数据，并且添加额外属性

// 改变全局变量
changeGlobalData: function () {
	this.globalData.appname = this.globalData.appname + new Date().getTime();
	this.globalData.myson = "huanghaili";
},

4. 进入另外一个页面 newpage.vue，显示额外添加的属性

<view class="">
	{{pageGlobalData.myson}}
</view>

在视图中不能直接使用 this.globalData 调用数据，导致页面内容显示不出来,因此，需要额外利用一个变量，来代替globalData

export default {
	data() {
		return {
			messageCardParams: '',
			pageGlobalData: {},
			isShowQrcode: false
		};
	},
	mounted: function () {
		this.createQrCode ('https://github.com/demi520/wxapp-qrcode', 'mycanvas', 300, 300)
		// this.globalData 代表的是globalData.js全局变量
		this.pageGlobalData = this.globalData;
	},
}

uni-app 使用Vuex定义全局变量

uni-app 常见问题

1. 创建一个store对象，对外暴露

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		memberData: 'huangbiao',
		initName: 'yifeng'
	},
	mutations: {
		copy(state, cont) {
			//单一的改变某一个变量
			console.log(state)
			console.log(cont)
			state.memberData = cont;
		},
		// 这个里只能接收一个参数，因此，如果要传递多个参数，就需要传递对象
		changeVuexState(state, paramObj) {
			//通过传入的变量去改变对应的全局变量
			let key = paramObj.key;
			let value = paramObj.value;
			state[key] = value;
		},
	},
	actions: {
		copeFun: function(context, mData) {
			context.commit('copy', mData)
		},
		changeFun: function(context, obj) {
			context.commit('change', obj)
		}
	}
})

export default store

2. 需要在 main.js 挂载 Vuex

import Vue from 'vue'
import App from './App'
import api from '@/common/js/vmeitime-http/'
import store from '@/common/store/store.js'

Vue.config.productionTip = false
Vue.prototype.$api = api
// 注意，是 $store
Vue.prototype.$store = store;

App.mpType = 'app'

const app = new Vue({
	// 这个是非必须的，如果有了，就能够通过 this.$store中访问
	store,
    ...App
})
app.$mount()

Vue.prototype.$store = store;

3. 页面中，映射state的值

import {  
	mapState,  
	mapMutations  
} from 'vuex';  

export default {  
	computed: {  
		...mapState(['avatarUrl', 'login', 'userName'])  
	},  
	methods: {  
		methods: {
			...mapMutations(['changeVuexState']),
			// 改变全局变量
			changeGlobalData: function () {
				this.changeVuexState({
					key: 'memberData',
					value: 'huanghaili-son'
				})
			},
		}
	}  
}