vuejs怎样全局自定义变量

vuejs怎样全局自定义变量，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

创新互联主要从事网站设计制作、成都网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务陇川,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

方法：设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用“export default”暴露出去，在“main.js”里面使用“Vue.prototype”挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。

本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

定义全局变量

原理：

设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用export default 暴露出去，在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。

全局变量模块文件：

Global.vue文件：

<script>
const serverSrc='www.baidu.com';
const token='12345678';
const hasEnter=false;
const userSite="中国钓鱼岛";
  export default
  {
    userSite,//用户地址
    token,//用户token身份
    serverSrc,//服务器地址
    hasEnter,//用户登录状态
  }
</script>

使用方式1：

在需要的地方引用进全局变量模块文件，然后通过文件里面的变量名字获取全局变量参数值。

在text1.vue组件中使用：

<template>
    <div>{{ token }}</div>
</template>

<script>
import global_ from '../../components/Global'//引用模块进来
export default {
 name: 'text',
data () {
    return {
         token:global_.token,//将全局变量赋值到data里面，也可以直接使用global_.token
        }
    }
}
</script>
<style scoped>

</style>

使用方式2：

在程序入口的main.js文件里面，将上面那个Global.vue文件挂载到Vue.prototype。

 import global_ from './components/Global'//引用文件
 Vue.prototype.GLOBAL = global_//挂载到Vue实例上面

接着在整个项目中不需要再通过引用Global.vue模块文件，直接通过this就可以直接访问Global文件里面定义的全局变量。

text2.vue：

<template>
    <div>{{ token }}</div>
</template>

<script>
export default {
 name: 'text',
data () {
    return {
         token:this.GLOBAL.token,//直接通过this访问全局变量。
        }
    }
}
</script>
<style scoped>
</style>

Vuex也可以设置全局变量

关于vuejs怎样全局自定义变量问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。

分享名称：vuejs怎样全局自定义变量
文章链接：https://www.cdcxhl.com/article40/jchjeo.html

成都网站建设公司_创新互联，为您提供服务器托管、软件开发、网站策划、搜索引擎优化、App设计、手机网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联