uni-app / vue 全局变量的几种实现方式
这种方式维护起来比较方便,但是缺点就是每次都需要引入。
·
公用模块
定义一个专用的模块,用来组织和管理这些全局的变量,在需要的页面引入。
(第一种方法)在 uni-app 项目根目录下创建 common 目录,然后在 common 目录下 utils 目录下 新建 helper.js
用于定义公用的方法。
const tiptext = 'hello helper';
export default {
tiptext,
}
在需要的页面 中引用该模块
<script>
import helper from '@/common/utils/helper.js';
export default {
data() {
return {};
},
onLoad(){
console.log(helper.tiptext);
},
methods: {
}
}
</script>
这种方式维护起来比较方便,但是缺点就是每次都需要引入。
(第二种方法)挂载 Vue.prototype
在 main.js 中挂载属性/方法
Vue.prototype.baseUel = 'http://uniapp.dcloud.io';
在需要的页面 中调用
<script>
export default {
data() {
return {};
},
onLoad(){
console.log(this.baseUel,'+++++');
},
methods: {
}
}
</script>
这种方式,只需要在 main.js 中定义好即可在每个页面中直接调用。
Tips
每个页面中不要在出现重复的属性或方法名。
建议在 Vue.prototype 上挂载的属性或方法,可以加一个统一的前缀。比如 $url、global_url 这样,在阅读代码时也容易与当前页面的内容区分开。
(第三种方法)globalData ->是一种比较简单的全局变量使用方式。
定义:App.vue
<script>
export default {
globalData: {
text: 'text'
}
}
</script>
使用方式
<script>
export default {
data() {
return {};
},
onLoad(){
console.log(getApp().globalData.text) // 'test' 取值
console.log(getApp().globalData.text = '123123'); // 赋值
},
methods: {
}
}
</script>
(第三种方法)Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
在 uni-app 项目根目录下新建 store 目录,在 store 目录下创建 index.js 定义状态值
let clearTime;
onst store = new Vuex.Store({
// state 存放全局值
state: {
loadingShow: false,
},
// mutations 修改state中的值
mutations: {
setLoadingShow(state, data) {
if(state.loadingShow){
if(data){
clearTime && clearTimeout(clearTime);
clearTime = setTimeout(function(){
state.loadingShow = false;
},5000);
} else {
clearTime && clearTimeout(clearTime);
clearTime = setTimeout(function(){
state.loadingShow = false;
},50);
}
} else {
state.loadingShow = data;
}
},
}
})
export default store;
然后,需要在 main.js 挂载 Vuex
import store from '@/store'
Vue.prototype.$store = store
const app = new Vue({
store,
...App
})
使用
<script>
export default {
data() {
return {};
},
onLoad(){
console.log(this.$store.state.loadingShow); // 获取state里loadingShow状态
this.$store.commit("setLoadingShow", true) // 改变state里loadingShow状态的状态
console.log(this.$store.state.loadingShow); // 再打印一遍就会显示改动的状态了
},
methods: {
}
}
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)