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

Файл My App.vue містить шаблон:

<template>
    <navbar></navbar>
    <div class="container">
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //stuff
        }
    }
}
</script>

Потім у мене є купа <router-view>однофайлових компонентів, до яких Vue-Router обробляє навігацію всередині тегу в шаблоні 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 або функції всередині нього, мені потрібно перейти до кожного окремого компонента, який його імпортує, та змінити оператор import.

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

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

всередині будь-якого компонента без необхідності спочатку імпортувати їх, а потім додавати це до імені функції

Те, що ви описали, - це міксин .

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

Це глобальний мікс. за допомогою цього ВСІХ ваші компоненти матимуть capitalizeFirstLetterметод, тому ви можете зателефонувати this.capitalizeFirstLetter(...)з методів компонентів або ви можете викликати його безпосередньо, як capitalizeFirstLetter(...)у шаблоні компонента.

Робочий приклад: http://codepen.io/CodinCat/pen/LWRVGQ?editors=1010

Дивіться документацію тут: https://vuejs.org/v2/guide/mixins.html

В іншому випадку ви можете спробувати зробити так, щоб ваші помічники функціонували як плагін:

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

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

Vue.use(plugin)

Під час helper.jsекспорту ваших функцій таким чином:

const capFirstLetter = (val) => val.charAt(0).toUpperCase() + val.slice(1);
const img2xUrl = (val) => `${val.replace(/(\.[\w\d_-]+)$/i, '@2x$1')} 2x`;

export default { capFirstLetter, img2xUrl };

або

export default { 
  capFirstLetter(val) {
    return val.charAt(0).toUpperCase() + val.slice(1);
  },
  img2xUrl(val) {
    return `${val.replace(/(\.[\w\d_-]+)$/i, '@2x$1')} 2x`;
  },
};

Тоді ви зможете використовувати їх де завгодно у своїх компонентах, використовуючи:

this.$helpers.capitalizeFirstLetter()

або в будь-якому місці вашої програми, використовуючи:

Vue.helpers.capitalizeFirstLetter()

Детальніше про це ви можете дізнатися з документації: https://vuejs.org/v2/guide/plugins.html

Створіть новий мікс:

"src / mixins / generalMixin.js"

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

Потім імпортуйте його у свій main.js, наприклад:

import '@/mixins/generalMixin'

Відтепер ви зможете користуватися цією функцією як this.capitalizeFirstLetter(str)у скрипті компонента, так і thisв шаблоні.

Ви повинні використовувати, thisоскільки ви змішали метод в основному екземплярі Vue. Якщо існують способи його видалення this, можливо, це передбачає щось нетрадиційне, це, принаймні, є задокументованим способом спільного використання функцій, який буде легко зрозуміти для майбутніх розробників Vue для вашого проекту.

Використання Webpack v4

Створіть окремий файл для читабельності (щойно випав мій у папці плагінів). Відтворено з відповідей @CodinCat та @digout

//resources/js/plugins/mixin.js
import Vue from 'vue'

Vue.mixin({
    methods: {
      capitalizeFirstLetter: str => str.charAt(0).toUpperCase() + str.slice(1),
      sampleFunction(){
        alert('Global Functions')
      }
    }
  })

Потім імпортуйте файл main.js або app.js

//app.js
import mixin from './plugins/mixin' 

ВИКОРИСТАННЯ:

зателефонуйте this.sampleFunction()абоthis.capitalizeFirstLetter()

Використовуйте глобальний фільтр, якщо це стосується лише форматування даних при отриманні. Це перший приклад у документах :

{{ message | capitalize }}

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

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

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

Імпортуйте його у файл 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)
})