Вю.Яш - делать вспомогательные функции доступны в одном файле компонентов
У меня есть проект Vue 2, который имеет много (50+) однофайловых компонентов . Я использую Vue-Router для маршрутизации и Vuex для состояния.
Есть такой файл, называется helpers.js, который содержит кучу функций общего назначения, таких как заглавная буква первой буквы строки. Этот файл выглядит так:
export default {
capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
}
Моя главная.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')
Мое Приложение.файл vue содержит шаблон:
<template>
<navbar></navbar>
<div class="container">
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
return {
//stuff
}
}
}
</script>
Затем у меня есть куча однофайловых компонентов, которые vue-Router обрабатывает навигацию внутри <router-view>
в приложении.шаблон vue.
Теперь предположим, что мне нужно использовать функцию capitalizeFirstLetter()
внутри компонента, который определен в SomeComponent.вю . Для того, чтобы сделать это, мне сначала нужно импортировать его:
<template>Some Component</template>
<script>
import {capitalizeFirstLetter} from '../helpers.js'
export default {
data() {
return {
myString = "test"
}
},
created() {
var newString = this.capitalizeFirstLetter(this.myString)
}
}
</script>
Это быстро становится проблемой, потому что я в конечном итоге импортирую функцию во множество различных компонентов, если не во все из них. Это кажется повторяющимся и также затрудняет поддержание проекта. Например, если я хочу переименовать помощников.js, или функции внутри него, затем мне нужно войти в каждый отдельный компонент, который импортирует его,и изменить инструкцию import.
Короче говоря, как я делаю функции внутри помощников.js глобально доступны, так что я могу вызвать их внутри любого компонента без необходимости сначала импортировать их, а затем добавить this
к имени функции? Я в принципе хочу быть в состоянии сделать это:
<script>
export default {
data() {
return {
myString = "test"
}
},
created() {
var newString = capitalizeFirstLetter(this.myString)
}
}
</script>


Ответы - Вю.Яш - делать вспомогательные функции доступны в одном файле компонентов / Vue.js - Making helper functions globally available to single-file components

05.03.2017 10:54:42
В противном случае, вы можете попытаться сделать ваши помощники функции плагина:
Официальным способом создания плагина является создание объекта с функцией установки:
import Vue from 'vue'
import helpers from './helpers'
const plugin = {
install () {
Vue.helpers = helpers
Vue.prototype.$helpers = helpers
}
}
Vue.use(plugin)
Затем вы должны иметь возможность использовать их в любом месте ваших компонентов с помощью:
this.$helpers.capitalizeFirstLetter()
или в любом месте вашего приложения с помощью:
Vue.helpers.capitalizeFirstLetter()
Вы можете узнать больше об этом в документации: https://vuejs.org/v2/guide/plugins.html




06.03.2017 09:07:24
внутри любого компонента без необходимости сначала импортировать их и затем добавить это к имени функции
То, что вы описали, - это миксин .
Vue.mixin({
methods: {
capitalizeFirstLetter: str => str.charAt(0).toUpperCase() + str.slice(1)
}
})
Это глобальный микс. при этом все ваши компоненты будут иметь capitalizeFirstLetter
Рабочий пример: http://codepen.io/CodinCat/pen/LWRVGQ?editors=1010
Смотрите документацию здесь: https://vuejs.org/v2/guide/mixins.html



capitalizeFirstLetter
из экземпляра const vm = new Vue()
? Потому vm.capitalizeFirstLetter
не работает.

функцию capitalizeFirstLetter в микшине или у них будет своя собственная копия? Я ищу место для хранения функции, которая должна быть доступна каждому компоненту, но в остальном не связана с ними (получение данных с сервера для хранения в хранилище vuex)


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

11.04.2017 01:33:02
Импортируйте его в основном.JS файл так же, как "магазин", и вы можете получить доступ к нему во всех компонентах.
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)
})


04.11.2019 11:10:57
Создайте новый подмешать:
"ГКЗ/примеси/generalMixin.JS"
Vue.mixin({
methods: {
capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
}
})
Импорт его в ваш основной.Яш, как:
import '@/src/mixins/generalMixin'
С этого момента вы сможете использовать эту функцию this.capitalizeFirstLetter(str)
.
Вы должны использовать this
, потому что вы смешали метод в главном экземпляре Vue. Если есть способы устранить this
, то это, вероятно, будет связано с чем-то нетрадиционным, по крайней мере, это документированный способ совместного использования функций, который будет легко понять для любых будущих разработчиков Vue в вашем проекте.