많은 (50 개 이상의) 단일 파일 구성 요소 가있는 Vue 2 프로젝트가 있습니다 . 라우팅에는 Vue-Router를 사용하고 상태에는 Vuex를 사용합니다.
문자열의 첫 글자를 대문자로 바꾸는 것과 같은 많은 범용 함수를 포함하는 helpers.js 라는 파일 이 있습니다. 이 파일은 다음과 같습니다.
export default {
capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
}내 main.js 파일은 앱을 초기화합니다.
import Vue from 'vue'
import VueResource from "vue-resource"
import store from "./store"
import Router from "./router"
import App from "./components/App.vue"
Vue.use(VueResource)
const app = new Vue({
router: Router,
store,
template: '<app></app>',
components: { App }
}).$mount('#app')내 App.vue 파일에는 다음 템플릿이 포함되어 있습니다.
<template>
<navbar></navbar>
<div class="container">
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
return {
//stuff
}
}
}
</script>그런 다음 Vue-Router가 <router-view>App.vue 템플릿 의 태그 내부로 이동하는 작업을 처리하는 단일 파일 구성 요소 가 많이 있습니다.
이제 SomeComponent.vue에capitalizeFirstLetter() 정의 된 구성 요소 내 에서 함수 를 사용해야한다고 가정 해 보겠습니다 . 이렇게하려면 먼저 가져와야합니다.
<template>Some Component</template>
<script>
import {capitalizeFirstLetter} from '../helpers.js'
export default {
data() {
return {
myString = "test"
}
},
created() {
var newString = this.capitalizeFirstLetter(this.myString)
}
}
</script>모두는 아니지만 많은 다른 구성 요소로 함수를 가져 오기 때문에 이것은 빠르게 문제가됩니다. 이것은 반복적으로 보이며 또한 프로젝트를 유지하기 어렵게 만듭니다. 예를 들어 helpers.js 또는 그 안에있는 함수의 이름을 바꾸려면이를 가져 오는 모든 단일 구성 요소로 이동하여 import 문을 수정해야합니다.
간단히 말해서 , helpers.js 내부의 함수를 전역 적으로 사용 가능 하게 만들려면 먼저 함수 를 가져온 다음 함수 이름 앞에 추가하지 않고도 모든 구성 요소 내에서 호출 할 수 있도록 하려면 어떻게해야 this합니까? 나는 기본적으로 이것을 할 수 있기를 원합니다.
<script>
export default {
data() {
return {
myString = "test"
}
},
created() {
var newString = capitalizeFirstLetter(this.myString)
}
}
</script>
this.