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