vue2에서 전역 변수를 설정하는 방법은 무엇입니까? (자세한 튜토리얼)-JS 튜토리얼-php.cn

vue2에서 전역 변수를 설정하는 방법은 무엇입니까? (자세한 튜토리얼)

亚连

풀어 주다： 2018-05-31 15:24:56

원래의

3930명이 탐색했습니다.

이제 vue2 전역 변수 설정 방법에 대한 기사를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

최근 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">
   <p 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>
   </p>
  </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_

로그인 후 복사

마운팅 후에는 글로벌 변수를 참조해야 하는 모듈에서 글로벌 모듈을 import할 필요가 없습니다.

<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는 약간 번거롭기 때문에 과잉이라는 느낌이 듭니다. 나는 그것이 필요하다고 생각하지 않습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.