Подтвердить что ты не робот

Vue.js - Создание вспомогательных функций, доступных глобально для однофайловых компонентов

У меня есть проект Vue 2, у которого есть много (50+) однофайловых компонентов. Я использую 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.

Теперь скажем, что мне нужно использовать функцию capitalizeFirstLetter() внутри компонента, который определен в SomeComponent.vue. Для этого мне сначала нужно импортировать его:

<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 или функции внутри него, тогда мне нужно перейти к каждому компоненту, который импортирует его и изменить оператор импорта.

Короче говоря:, как сделать функции внутри helpers.js доступными по всему миру, чтобы я мог вызывать их внутри любого компонента, не сначала импортируя их, а затем добавляя this к функции имя? Я в основном хочу иметь возможность сделать это:

<script>
export default {
    data() {
        return {
            myString = "test"
        }
    },
    created() {
         var newString = capitalizeFirstLetter(this.myString)
    }
}
</script>
4b9b3361

Ответ 1

внутри любого компонента без необходимости сначала импортировать их, а затем добавить это к имени функции

То, что вы описали, 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

Ответ 2

В противном случае вы можете попытаться заставить своих помощников использовать плагин:

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

Затем в вашем файле main.js:

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

Vue.use(helpersPlugin);

Затем вы сможете использовать их в любом месте своих компонентов, используя:

this.$helpers.capitalizeFirstLetter()

Источник: https://gist.github.com/logaretm/56126af5867e391ea9507b462259caf3

Ответ 3

Импортируйте его в файл main.js, как "store", и вы можете получить к нему доступ во всех компонентах.

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)
})

Ответ 4

Отличный вопрос. В своем исследовании я нашел, что vue-inject может справиться с этим наилучшим образом. У меня есть много библиотек функций (сервисов), которые хранятся отдельно от стандартных методов обработки компонентов vue. Мой выбор заключается в том, чтобы компонентные методы были просто делегатами, вызывающими сервисные функции.

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

Ответ 5

Способ сделать это - назначить вспомогательные функции для глобального объекта, а не экспортировать их:

window.capitalizeFirstLetter = (str) => {
    return str.charAt(0).toUpperCase() + str.slice(1);
};