【无标题】uniapp全局变量的使用方式

1.在公用模板中使用

在uni-app项目限目录下创建common目录，然后在common目录下新建hclper:js. 用于定义么
用的方法，代码如下。

const websiteUrl - ‘http://uniapp.dcloud.io';
const now = Date.now ll function ()return new Date () .getrime();
};
const isArray = Array.isArray ll function (obj)(
return obi instanceof Arrayi；

}；
export default {
websiteUrl, 
now, 
isArray

}

接下来在pages/index/index.vue中引入该模块并使用，代码如下。

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

export default (
  data() {
      return{};

}，
   onLoad()(
           console.log('now:’ + helper.now());

}，
methods:{

     }

}

/script>

这种方式的代码维护起来比较方便，但缺点是每次都需要引入定义的公用模块

2.在Vue原型上挂载

将一些使用频率较高的常量或方法直接扩展到Vuc. prolotype上，每个Vue对象都会“继派”
下来。

在main js中挂载属性或方法，代码如下。
we.prototype.websiteUrl -='http://unlapp.dcloud.1o';
vwe.prototype.now = Date.now || function () {

return new Date().getTime()；

}；
vue.prototype.isArray = Array, isArray 1l function (obj){

return obj instanceof Array;

}；

然后在pages/index/index.vue中调用该属性或方法，代码如下。
<script>
    export default (
        data（）{
             return {}；

}，
onLoad(){
       console.log('now:’ + this.now())；

}，
nethods:{

   }

   }
</script>

在main.js中定义好常量或方法，即可在每个页面中直接调用。

3. 使用全局数据

小段序中有一个globaData概念，可以在App上s明全局变量。Vue中没有这一概念，但uni.app中引人了globalData概念，并且在H5、App等平台都已实现这一概念。
在App.vueP可以定义globalData， 业可以使用API读写该值。globalDala支持Vue和Nvue共实
数据。globalData是一种比较简单的全局变量使用方式。

在App.vue文件中定义globalData，示例代码如下。

<soripe>
export default {
     globalData:{
        text:'text'
}，
onLaunch: function() {
     console.log('App Launch')
}，
   onShow: function() {
          console.log('App Show')

}，
    onHide: function(){
           console.log ('App Hide')

      }   

}
</script>

在JS中操作globalData的方式如下。
(1) 赋值：getApp（）.globalData.text='test'。
(2)取值：console.log(getAppO.globalData.text) //'test'。
如果需要把globalData的数据绑定到页面中，可以在页面的onShow声明周期中进行变量重赋值。自HBuilderX 2.0.3版本起，Nvue页面在uni-ap编译模式下也支持onShow.

4 使用Vuex状态管理模式
Vuex是一个专为Vuejs应用程序开发的状态管理模式，采用集中式存储管现应用的所有组件
的状态，并以相应的规则保证组件状态以一种可预测的方式发生变化

首先，在uni-app项目根目录下新建slore日录，在sare日录下创index.js并定人秋态值，后
例代码如下。

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 =''.

       }

   }

})

然后，在main.js文件中挂载Vuex，示例代码如下。

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

最后，在pages/index/index.vue中使用Vuex，示例代码如下。

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

},

methods:{

...mapMutations(['logout'])

   }

}

<script>

示例操作步骤：未登录时，页面上会提示用户登录。用户跳转到登录页后，点击【登录】我钮将会获取用户信息，同步更新状态后，返回个人中心即可看到信息同步后的结果。