uni-app全局变量

一、公用方法模块

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

在 uni-app 项目根目录下创建 common 目录，新建 utils.js，用于定义公用的方法。

const now = Date.now || function () {
  return new Date().getTime() 
}
//都是获取1970年1月1日截止到现在时刻的时间戳，但Date.now()的执行速度略快于new.Date().getTime()，基本可忽略不计。

const isArray = Array.isArray || function (obj) { 
  return obj instanceof Array
}

export default {
  now, 
  isArray 
}

引用该模块：

<script> 
 import utils from 'common/utils.js'
 export default {
   data() { 
     return {} 
   }, 
   onLoad(){ 
     console.log('now:' + utils.now())
   },
   methods: { } 
 } 
</script>

维护比较方便，但每次都需要引入。

二、添加到Vue.prototype上

将一些使用频率较高的常量或者方法，直接添加到 Vue.prototype 上，每个 Vue 实例都会继承。
注意：此方式只支持vue页面

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

Vue.prototype.now = Date.now || function () {
  return new Date().getTime()
} 

调用：

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

在每个页面中直接调用。
在 Vue.prototype 上挂载的属性或方法，可以加个统一的前缀。比如 _now，方便与当前页面的内容区分开。

三、globalData

小程序也有globalData，可以在 App 上声明全局变量。 Vue 没有，但 uni-app 引入了globalData，并且在H5、App等平台都实现了。
在 App.vue 可以定义 globalData ，也可以使用 API 读写这个值。
globalData支持vue和nvue共享数据。
globalData是一种比较简单的全局变量使用方式。

App.vue

<script> 
  export default { 
    globalData: { 
      text: 'Hello' 
    }, 
    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 应用的状态管理模式。HBuilderX 2.2.5+起，支持vue和nvue之间共享。
例：在项目根目录下创建 store 目录，并新建 index.js 文件：

const store = new Vuex.Store({ 
  state: { 
    login: false,
    token: '',
    userName: '' 
  }, 
  mutations: { 
    login(state, provider) {
      state.login = true
      state.token = provider.token
      state.userName = provider.userName
    }, 
    logout(state) { 
      state.login = false 
      state.token = ''
      state.userName = ''
    } 
  }
})

在 main.js 挂载 Vuex

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

使用

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

相比前面的方式，此方式更加适合处理全局的且值会发生变化的情况。

注意：Vue 原型上挂载的属性，不能在 nvue 中使用。