全局变量的实现方式

一. 本地存储

将数据存储在本地缓存中指定的key中. 具体内容参考uniapp本地存储

二. 公用模块

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

1. 在根目录下创建common目录, 然后在common目录下新建helper.js用于定义公用的方法.

comst siteUrl = 'http://...';
export default {
    siteUrl
}

2. 在index.vue中引用该模块

维护比较方便, 但是每次都需要引入

<script>
	import helper from '../../common/helper.js';
    export default {
        onLoad() {
            console.log('url:' + helper.siteUrl);
        }
    }
</script>

三. 挂载Vue.prototype

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

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

Vue.prototype.siteUrl = 'http://...';
Vue.prototype.now = Date.now || function () {  
    return new Date().getTime();  
};  

2. 在页面中调用

<script>
	onLoad(){
    	console.log('url:' + this.siteUrl);
	}
</script>

四. Vuex

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

1. 在根目录下新建store目录, 在store目录下创建index.js定义状态值

import Vue from 'vue';
import Vuex from 'Vuex';
import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({  
    state: {  
        login: false,  
        token: '',  
        avatarUrl: '',  
        userName: ''  
    },  
    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 = '';  
        }  
    }  
})

export default store

2. 在main.js挂载Vuex

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

3. 在页面中使用

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