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 = storeconst 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>

uni-app / vue 全局变量的几种实现方式相关推荐

js定义全局变量 vue页面_详解Vue.js 定义全局变量的几种实现方式
详解Vue.js 定义全局变量的几种实现方式发布于 2020-8-11| 复制链接本篇文章主要介绍了VUE 全局变量的几种实现方式,小妖觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小妖 ...
关于vue全局变量的几种使用方法说明
这几种方法都是亲手实验过到底好不好用的,大家可以参考下: 1.写一个js文件,或者vue文件,把全局变量写到里面,然后挂载到Vue.prototype上面去,在main.js中引入包含全局变量的文件. ...
Vue组件的三种调用方式
最近在写fj-service-system的时候,遇到了一些问题.那就是我有些组件,比如Dialog.Message这样的组件,是引入三方组件库,比如element-ui这样的,还是自己实现一个?虽然 ...
uni-app 全局变量的几种实现方式
公用模块定义一个专用的模块,用来组织和管理这些全局的变量,在需要的页面引入. 示例如下: 在 uni-app 项目根目录下创建 common 目录,然后在 common 目录下新建 helper.j ...
APP付费运营：每种推广方式怎么收费？
在app运营推广中,除了免费推广方式之外,更多的是付费推广.而app付费推广又不可避免地会涉及到一个话题:app推广费用.今天,小编就来说说那些付费的app推广方式都是怎么收费的. 付费的APP推广方 ...
Android uni app 列表底部白条解决方案
uni app中android打开本地vue的列表会发现,底部有条白边. vue通过uni.getSystemInfoSync();方法获取系统信息,首次取值对,再次取值就出错 uni app每次启动 ...
mysql几种安装方法_mysql的三种安装方式（详细）
安装MySQL的方式常见的有三种: rpm包形式通用二进制形式源码编译 1,rpm包形式 (1) 操作系统发行商提供的 (2) MySQL官方提供的(版本更新,修复了更多常见BUG)www.mys ...
【UNI APP】globalData全局变量
uni-app 在app.vue文件export default里面定义globalData,在当前文件(app.vue)里面获取globalData需要用this.$options.globalDa ...
vue插槽solt ，uni.app
一.什么是插槽? 插槽就是子组件提供给父组件使用的一个占位符,用<slot></solt>表示父组件可以在这个占位符中填充任何模板代码. 二.插槽的用法 1.创建一个子组件,在 ...

uni-app / vue 全局变量的几种实现方式

uni-app / vue 全局变量的几种实现方式相关推荐

最新文章

热门文章