VUE에서 전역 변수를 정의하는 여러 가지 방법에 대한 자세한 설명-JS 튜토리얼-php.cn

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

黄舟

풀어 주다： 2017-07-24 13:37:35

원래의

4126명이 탐색했습니다.

최근 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 &#39;./components/tool/Global&#39;
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!