uni-app 全局变量的实现

uni-app 全局变量的实现方式

1.公用模块
2.globalData
3.Vuex

1.公用模块

定义一个专用的模块，用来组织和管理这些全局的变量，在需要的页面引入。
注意这种方式只支持多个vue页面或多个nvue页面之间公用，vue和nvue之间不公用。

示例如下：
在uniapp根目录下创建common目录，然后在common目录下创建一个index.js文件用户定义一些公用的方法

const websiteUrl = 'http://uniapp.dcloud.io';  
const now = Date.now || function () {  
    return new Date().getTime();  
};  
const isArray = Array.isArray || function (obj) {  
    return obj instanceof Array;  
};  

export default {  
    websiteUrl,  
    now,  
    isArray  
}

然后在页面中进行引入即可，虽然这种方式维护起来比较方便，但是每次都需要引入。

2.globalData

小程序中为我们提供了globalData这个属性，即就可以在App上声明全局变量。而且使用globalData vue和nvue间都可以使用数据共享

示例如下：

<script>
	export default {
		globalData:{
			text:"我是全局的变量啊",
			message:"现在是用globalData来实现的全局变量啊！！"
		},
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

在页面中使用“getApp().globalData.text和getApp().globalData.text = ‘test’”进行读写操作

示例如下：

onShow() {
				 // 使用global进行全局状态管理
			console.log(getApp().globalData.text)
			console.log(getApp().globalData.message)
		// console.log(this.userName)
		// console.log(this.avatarUrl)
		// console.log(this.token)
		// console.log(this.login)
		},

3.Vuex

uniapp为我们集成了vue的许多的语法，因此我们能够使用vue官方为我们提供的vuex进行全局变量的实现

例如：
在 uni-app 项目根目录下新建 store 目录，在 store 目录下创建 index.js 定义状态值

import Vuex from'vuex'
import Vue from 'vue'
Vue.use(Vuex)
export default new Vuex.Store({
	state:{
		login:false,
		token:"水电费违法",
		avatarUrl:'www.biadu.com',
		userName:"张德帅"
	},
	getters:{
	},
	actions:{
	},
	mutations:{
		  login(state, provider) {  
		            console.log(state)  
		            console.log(provider)  
		            state.login = true;  
		            state.token = provider.token;  
		            state.userName = provider.userName;  
		            state.avatarUrl = provider.avatarUrl;  
		        },  
		        logout(state) {  
		            state.login = false;  
		            state.token = '';  
		            state.userName = '';  
		            state.avatarUrl = '';  
		        }  
	},
	modules:{
	}
})

然后在main.js中将store挂载到vue的原型链上

import store from './store/index.js'
Vue.prototype.$store=store

最后就可以在 页面的computed的属性中监听这个值得变化

import {mapState,mapMutations} from 'vuex'
onShow() {
				 // 使用global进行全局状态管理
			// console.log(getApp().globalData.text)
			// console.log(getApp().globalData.message)
		console.log(this.userName)
		console.log(this.avatarUrl)
		console.log(this.token)
		console.log(this.login)
		},
		computed:{
			...mapState(['userName','avatarUrl','token','login'])
		},

希望能够帮助到各位小伙伴，如果能够解决小伙伴的问题，那么请给我一个赞，你们的点赞是我写博客的动力