Vue.js-단일 파일 구성 요소에서 전역 적으로 사용 가능한 도우미 기능 만들기

Vue.js-단일 파일 구성 요소에서 전역 적으로 사용 가능한 도우미 기능 만들기

---

많은 (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>

---

먼저 가져 와서 함수 이름 앞에 추가 할 필요없이 컴포넌트 내부에

설명하신 내용은 mixin 입니다.

Vue.mixin({
  methods: {
    capitalizeFirstLetter: str => str.charAt(0).toUpperCase() + str.slice(1)
  }
})

이것은 글로벌 믹스 인입니다. 이 모든 구성 요소에는 capitalizeFirstLetter메서드가 있으므로 다음을 호출 할 수 있습니다.this.capitalizeFirstLetter(...)

작업 예 : http://codepen.io/CodinCat/pen/LWRVGQ?editors=1010

https://vuejs.org/v2/guide/mixins.html 에서 문서를 참조하십시오.

---

그렇지 않으면 도우미가 플러그인으로 작동하도록 만들 수 있습니다.

2018 년 3 월 1 일 수정 :

The official way to make a plugin is to create an object with an install function:

import Vue from 'vue'
import helpers from './helpers'

const plugin = {
    install () {
        Vue.helpers = helpers
        Vue.prototype.$helpers = helpers
    }
}

Vue.use(plugin)

You should then be able to use them anywhere in your components using:

this.$helpers.capitalizeFirstLetter()

or anywhere in your application using:

Vue.helpers.capitalizeFirstLetter()

You can learn more about this in the documentation: https://vuejs.org/v2/guide/plugins.html

Old response:

import helpers from './helpers';
export default (Vue) => {
    Object.defineProperties(Vue.prototype, {
        $helpers: {
            get() {
                return helpers;
            }
        }
    });
};

Then, in your main.js file:

import Vue from 'vue'
import helpersPlugin from './helpersPlugin';

Vue.use(helpersPlugin);

Source: https://gist.github.com/logaretm/56126af5867e391ea9507b462259caf3

---

Great question. In my research I found vue-inject can handle this in the best way. I have many function libraries (services) kept separate from standard vue component logic handling methods. My choice is to have component methods just be delegators that call the service functions.

https://github.com/jackmellis/vue-inject

---

Import it in the main.js file just like 'store' and you can access it in all the components.

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App)
})

참고URL : https://stackoverflow.com/questions/42613061/vue-js-making-helper-functions-globally-available-to-single-file-components