关于vue.js:uniapp全局变量

一、专用办法模块

定义一个专用的模块，用来组织和治理这些全局的变量，在须要的页面引入。
留神：此形式只反对多个 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 中应用。