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

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

（第一种方法）在 uni-app 项目根目录下创建 common 目录，然后在 common 目录下 utils 目录下 新建 helper.js
用于定义公用的方法。

const tiptext = 'hello helper'; 

export default {  
    tiptext,
}

在需要的页面 中引用该模块

<script>  
    import helper from '@/common/utils/helper.js';

    export default {  
        data() {  
            return {};  
        },  
        onLoad(){  
            console.log(helper.tiptext);
        },  
        methods: {  
        }  
    }  
</script>

这种方式维护起来比较方便，但是缺点就是每次都需要引入。

（第二种方法）挂载 Vue.prototype

在 main.js 中挂载属性/方法

Vue.prototype.baseUel = 'http://uniapp.dcloud.io';  

在需要的页面 中调用

<script>  
    export default {  
        data() {  
            return {};  
        },  
        onLoad(){  
            console.log(this.baseUel,'+++++');
        },  
        methods: {  
        }  
    }  
</script>

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

Tips
每个页面中不要在出现重复的属性或方法名。
建议在 Vue.prototype 上挂载的属性或方法，可以加一个统一的前缀。比如 $url、global_url 这样，在阅读代码时也容易与当前页面的内容区分开。

（第三种方法）globalData ->是一种比较简单的全局变量使用方式。

定义：App.vue

<script>  
    export default {  
        globalData: {  
            text: 'text'  
        }
    }  
</script>

使用方式

<script>  
    export default {  
        data() {  
            return {};  
        },  
        onLoad(){  
			console.log(getApp().globalData.text) // 'test' 取值
			console.log(getApp().globalData.text = '123123');  // 赋值
		},
        methods: {  
        }  
    }  
</script>

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

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

let clearTime;

onst store = new Vuex.Store({  
	// state 存放全局值
    state: {  
		loadingShow: false,
    },
    // mutations 修改state中的值
    mutations: {
		setLoadingShow(state, data) {
			if(state.loadingShow){
				if(data){
					clearTime && clearTimeout(clearTime);
					clearTime = setTimeout(function(){
						state.loadingShow = false;
					},5000);
				} else {
					clearTime && clearTimeout(clearTime);
					clearTime = setTimeout(function(){
						state.loadingShow = false;
					},50);
				}
			} else {
				state.loadingShow = data;
			}
		},
    }  
})


export default store;

然后，需要在 main.js 挂载 Vuex

import store from '@/store'
Vue.prototype.$store = store

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

使用

<script>  
    export default {  
        data() {  
            return {};  
        },  
        onLoad(){  
			console.log(this.$store.state.loadingShow); // 获取state里loadingShow状态
			this.$store.commit("setLoadingShow", true)  // 改变state里loadingShow状态的状态
			console.log(this.$store.state.loadingShow); // 再打印一遍就会显示改动的状态了
		},
        methods: {  
        }  
    }  
</script>