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