VUE에서 전역 변수를 정의하는 여러 가지 방법에 대한 자세한 설명

최근 VUE.js를 배우다 보면 JS 전역 변수가 VUE의 전역 변수가 아닌 모듈러 JS 개발의 전역 변수로 사용됩니다.

1. 전역 변수 특수 모듈

은 특정 모듈을 사용하여 이러한 전역 변수를 구성하고 관리해야 합니다.

전역 변수를 위한 특수 모듈 Global.vue

<script type="text/javascript">
const colorList = [
 &#39;#F9F900&#39;,
 &#39;#6FB7B7&#39;,
 &#39;#9999CC&#39;,
 &#39;#B766AD&#39;,
 &#39;#B87070&#39;,
 &#39;#FF8F59&#39;,
 &#39;#FFAF60&#39;,
 &#39;#FFDC35&#39;,
 &#39;#FFFF37&#39;,
 &#39;#B7FF4A&#39;,
 &#39;#28FF28&#39;,
 &#39;#1AFD9C&#39;,
 &#39;#00FFFF&#39;,
 &#39;#2894FF&#39;,
 &#39;#6A6AFF&#39;,
 &#39;#BE77FF&#39;,
 &#39;#FF77FF&#39;,
 &#39;#FF79BC&#39;,
 &#39;#FF2D2D&#39;,
 &#39;#ADADAD&#39;
]
const colorListLength = 20
function getRandColor () {
 var tem = Math.round(Math.random() * colorListLength)
 return colorList[tem]
}
export default
{
 colorList,
 colorListLength,
 getRandColor
}
</script>

모듈의 변수는 내보내기를 통해 노출됩니다. 다른 곳에서 사용해야 하는 경우 전역 모듈을 도입하기만 하면 됩니다.

전역 변수 모듈인 html5.vue

<template>
 <ul>
  <template v-for="item in mainList">
   <div class="projectItem" :style="&#39;box-shadow:1px 1px 10px &#39;+ getColor()">
     <router-link :to="&#39;project/&#39;+item.id">
      ![](item.img)
      <span>{{item.title}}</span>
     </router-link>
   </div>
  </template>
 </ul>
</template>
<script type="text/javascript">
import global_ from &#39;components/tool/Global&#39;
export default {
 data () {
  return {
   getColor: global_.getRandColor,
   mainList: [
    {
     id: 1,
     img: require(&#39;../../assets/rankIcon.png&#39;),
     title: &#39;登录界面&#39;
    },
    {
     id: 2,
     img: require(&#39;../../assets/rankIndex.png&#39;),
     title: &#39;主页&#39;
    }
   ]
  }
 }
}
</script>
<style scoped type="text/css">
.projectItem
{
 margin: 5px;
 width: 200px;
 height: 120px;
 /*border:1px soild;*/
 box-shadow: 1px 1px 10px;
}
.projectItem a
{
 min-width: 200px;
}
.projectItem a span
{
 text-align: center;
 display: block;
}
</style>

2를 사용해야 합니다. 전역 변수 모듈은 Vue.prototype에 마운트되어 있습니다.

Global.js는 위와 동일합니다. 프로그램 입구에서 main.js에 다음 코드를 추가하세요

import global_ from './components/tool/Global'
Vue.prototype.GLOBAL = global_

마운팅 후에는 글로벌 변수를 참조해야 하는 모듈에서 글로벌 모듈을 가져올 필요가 없습니다. 다음과 같이 이를 직접 사용하여 참조할 수 있습니다.

<script type="text/javascript">
export default {
 data () {
  return {
   getColor: this.GLOBAL.getRandColor,
   mainList: [
    {
     id: 1,
     img: require(&#39;../../assets/rankIcon.png&#39;),
     title: &#39;登录界面&#39;
    },
    {
     id: 2,
     img: require(&#39;../../assets/rankIndex.png&#39;),
     title: &#39;主页&#39;
    }
   ]
  }
 }
}
</script>

3. VUEX 사용

Vuex는 Vue.js 애플리케이션용으로 특별히 개발된 상태 관리 모델입니다. 중앙 집중식 저장소를 사용하여 애플리케이션의 모든 구성 요소 상태를 관리합니다. 따라서 전역 변수를 저장할 수 있습니다. Vuex는 약간 번거롭기 때문에 과잉이라는 느낌이 듭니다. 나는 그것이 필요하다고 생각하지 않습니다.

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