У меня есть проект 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>
Затем у меня есть набор <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 или функции внутри него, мне нужно перейти к каждому компоненту, который его импортирует, и изменить оператор импорта.
Короче говоря: как сделать функции внутри helpers.js глобально доступными, чтобы я мог вызывать их внутри любого компонента без необходимости сначала импортировать их, а затем добавлять this
к имени функции? Я в принципе хочу уметь это делать:
<script>
export default {
data() {
return {
myString = "test"
}
},
created() {
var newString = capitalizeFirstLetter(this.myString)
}
}
</script>
источник
this
.Ответы:
Вы описали миксин .
Это глобальный миксин. при этом ВСЕ ваши компоненты будут иметь
capitalizeFirstLetter
метод, поэтому вы можете вызывать ихthis.capitalizeFirstLetter(...)
из методов компонента или напрямую, как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)В противном случае вы можете попытаться заставить своих помощников работать с плагином:
import Vue from 'vue' import helpers from './helpers' const plugin = { install () { Vue.helpers = helpers Vue.prototype.$helpers = helpers } } Vue.use(plugin)
В вашем
helper.js
экспорте ваши функции следующим образом:или
Затем вы сможете использовать их в любом месте своих компонентов, используя:
this.$helpers.capitalizeFirstLetter()
или в любом месте вашего приложения, используя:
Vue.helpers.capitalizeFirstLetter()
Подробнее об этом можно узнать в документации: https://vuejs.org/v2/guide/plugins.html.
источник
Создайте новый миксин:
"src / mixins / generalMixin.js"
Затем импортируйте его в свой main.js, например:
С этого момента вы сможете использовать эту функцию как
this.capitalizeFirstLetter(str)
в сценарии компонента, так и без негоthis
в шаблоне.Вы должны использовать,
this
потому что вы смешали метод с основным экземпляром Vue. Если есть способы удалитьthis
это, вероятно, будет связано что-то нетрадиционное, это, по крайней мере, документированный способ совместного использования функций, который будет легко понять любым будущим разработчикам Vue для вашего проекта.источник
Создайте отдельный файл для удобства чтения (просто закинул мой в папку плагинов). Воспроизведено из ответов @CodinCat и @digout
Затем импортируйте в файл main.js или app.js
ПРИМЕНЕНИЕ:
Звоните
this.sampleFunction()
илиthis.capitalizeFirstLetter()
источник
Используйте глобальный фильтр, если он касается только того, как данные форматируются при визуализации. Это первый пример в документации :
источник
Отличный вопрос. В своем исследовании я обнаружил, что 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) })
источник