vue.js에서 전역 변수를 정의하는 방법

vue.js에서 전역 변수를 정의하는 방법: 1. 필요한 경우 전역 변수 모듈 파일을 참조하고 파일의 변수 이름을 통해 전역 변수 매개변수 값을 얻습니다. 2. 다음 위치의 [main.js] 파일에서; 프로그램 항목 내부에서 [Global.vue] 파일을 [Vue.prototype]에 마운트합니다.

이 튜토리얼의 운영 환경: windows10 시스템, vue2.5.2, 이 기사는 모든 브랜드의 컴퓨터에 적용 가능합니다.

【관련 추천 글: vue.js】

vue.js에서 전역 변수를 정의하는 방법:

원리: 전용 전역 변수 모듈 파일을 설정하고, 모듈에 일부 초기 변수를 정의합니다. 상태는 내보내기 기본값을 사용하여 노출됩니다. main.js의 Vue.prototype을 사용하여 vue 인스턴스에 마운트하거나 다른 장소에서 사용해야 하는 경우 모듈을 도입하면 됩니다.

전역 변수 모듈 파일:

Global.vue 파일

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

방법 1: 필요한 경우 전역 변수 모듈 파일을 참조한 후 파일에 있는 변수 이름을 통해 전역 변수 매개 변수 값을 가져옵니다.

    <template>
        <div>{{ token }}</div>
    </template>
     
    <script>
    import global_ from &#39;../../components/Global&#39;//引用模块进来
    export default {
     name: &#39;text&#39;,
    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 모듈 파일을 참조할 필요 없이 이를 통해 Global 파일에 정의된 전역 변수에 직접 접근할 수 있습니다.

text2.vue：
<template>
    <div>{{ token }}</div>
</template>
<script>
    export default {
        name: &#39;text&#39;,
        data () {
            return {
                 token:this.GLOBAL.token,//直接通过this访问全局变量。
                }
            }
    }
</script>
<style scoped>
</style>

관련 무료 학습 권장 사항: JavaScript(비디오)

위 내용은 vue.js에서 전역 변수를 정의하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!