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

公共模块

定义一个专用的模块，用来组织和管理这些全局的变量，在需要的页面引入。

注意这种方式只支持多个vue页面或者多个nvue页面之间公用，vue和nvue之间不公用

示例 定义公共方法：
在uni-app项目根目录下创建common目录。然后在common目录下新建util.js用于定义公用的方法。

/* 
 * 通用提示框 
 * @param { String } message 提示的信息
 * @param { Number } duration 提示保留显示的时间，默认2000
 */
function commonTip (message, duration = 2000) {
	return new Promise((resolve, reject) => {
		uni.showToast({
			title: message,
			icon: 'none',
			duration,
			fail () {
				reject('tip error')
			},
			success () {
				setTimeout(() => resolve('closed'), duration + 200)
			}
		})
	})
}


export { commonTip }

使用在 server.js中使用这个方法

<script>
		import { commonTip } from '@/common/utils'
		
		//直接使用commonTip方法
		commonTip('我是提示');
</script>

优点： 维护比较方便
缺点： 每次都要引入

挂载Vue.propotype

将一些使用频率较高的常量或者方法，直接扩展到Vue.prototype上，每个Vue对象都会“继承”下来

注意这种方式只支持Vue页面

在global/index.js中定义时间封装的方法

/**
     * dateFormat("YYYY-mm-dd HH:MM", date) >>> 2019-06-06 19:45
     * @param fmt
     * @param date
     * @returns {*}
     */
    Vue.prototype.myDateFormat = (fmt,date)=> {

      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
      };
      return fmt;

    };

使用 在入口函数 main.js中引入global

import global from './modules/global';
Vue.use(global);

任何一个vue中都可以使用

<script>  
    export default {  
        data() {  
            return {};  
        },  
        onLoad(){  
            let dateTime = this.myDateFormat("YYYY年mm月dd日 HH:MM", new Date());
        },  
        methods: {  
        }  
    }  
</script>

这种方式，只需要在main.js中定义好即可在每一个页面中直接调用
注意

1. 每一个页面不要出现重复的属性或者方法名，不然当前页面的优先级较高
2. 建议在Vue.propotype上挂载的属性或方法，可以加一个统一的前缀，比如$url,
   global_url这样，在阅读代码时也容易与当前页面内容区分开

globalData

小程序中有globalData的概念，可以在App上声明全局变量，vue之前是没有这类概念的，但 uni-app引入了globalData的概念，并且在包含H5、app等平台都实现了
在App.vue中可以定义globalData,也可以使用Api读写这个值。

globalData支持Vue和nvue共享数据
gloabalData是一种简单的全局变量的使用方式

定义： App.vue

<script>  
    export default {  
        globalData: {  
            text: 'text'  
        },  
        onLaunch: function() {  
            console.log('App Launch')  
        },  
        onShow: function() {  
            console.log('App Show')  
        },  
        onHide: function() {  
            console.log('App Hide')  
        }  
    }  
</script>  

<style>  
    /*每个页面公共css */  
</style>  

js中操作globalData的方式如下：

//赋值：
getApp().globalData.text = 'test'

//取值：
console.log(getApp().globalData.text) // 'test'

如果需要把globalData的数据绑定到页面上，可在页面的onshow声明周期里进行变量重赋值。HBuilderX 2.0.3起，nvue页面在uni-app编译模式下，也支持onshow。

Vuex

Vuex是一个专为vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

示例：

在uni-app项目目录下新建store目录，在store目录下创建Index.js定义状态值

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

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		token: ''
	},
	mutations: {
		setToken (state, payload) {
			state.token = payload
		}
	},
	actions: {

	}
})

export default store

在main.js中引入

import store from 'store'
const app = new Vue({
		store,
    ...App
})

最后在vue中使用
例如我在inde.vue中使用

<script>  
    import {  
        mapState,  
        mapMutations  
    } from 'vuex';  

    export default {  
        computed: {  
            ...mapState(['avatarUrl', 'login', 'userName'])  
        },  
        methods: {  
            ...mapMutations(['logout'])  
        }  
    }  
</script>

文章参阅：https://ask.dcloud.net.cn/article/35021