Вю.Яш - делать вспомогательные функции доступны в одном файле компонентов

Вю.Яш - делать вспомогательные функции доступны в одном файле компонентов

05.03.2017 10:40:11 Просмотров 25 Источник

У меня есть проект 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>
У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/42613061/vue-js-making-helper-functions-globally-available-to-single-file-components#comment72363738_42613061
Рассматривали ли вы возможность использования ваших помощников в качестве фильтров , чтобы они могли использоваться непосредственно в ваших шаблонах без необходимости их импорта? Это стратегия, которую я использую, и пока она работает хорошо.

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

Hammerbot

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

https://stackoverflow.com/questions/42613061/vue-js-making-helper-functions-globally-available-to-single-file-components/42613218#comment103560536_42613218
Пожалуйста, перечислите содержание помощников.вю
https://stackoverflow.com/questions/42613061/vue-js-making-helper-functions-globally-available-to-single-file-components/42613218#comment103561411_42613218
Не могли бы вы привести пример того, как получить доступ к Vue store? этот.$store работает в компонентах, но не в миксине.
https://stackoverflow.com/questions/42613061/vue-js-making-helper-functions-globally-available-to-single-file-components/42613218#comment103561504_42613218
Содержание помощников.JS-это вопрос
Является ответом!
CodinCat

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

https://stackoverflow.com/questions/42613061/vue-js-making-helper-functions-globally-available-to-single-file-components/42618631#comment81511483_42618631
Очень мило! Спасибо!
https://stackoverflow.com/questions/42613061/vue-js-making-helper-functions-globally-available-to-single-file-components/42618631#comment95566364_42618631
Было бы неплохо иметь более подробную информацию в этом ответе, например, как вы храните функцию mixin в своем собственном выделенном файле и как вы импортируете ее в main.js?
https://stackoverflow.com/questions/42613061/vue-js-making-helper-functions-globally-available-to-single-file-components/42618631#comment96217422_42618631
Как я могу использовать capitalizeFirstLetterиз экземпляра const vm = new Vue()? Потому vm.capitalizeFirstLetter не работает.
https://stackoverflow.com/questions/42613061/vue-js-making-helper-functions-globally-available-to-single-file-components/42618631#comment100517778_42618631
Будут ли все компоненты ссылаться на функцию capitalizeFirstLetter в микшине или у них будет своя собственная копия? Я ищу место для хранения функции, которая должна быть доступна каждому компоненту, но в остальном не связана с ними (получение данных с сервера для хранения в хранилище vuex)
https://stackoverflow.com/questions/42613061/vue-js-making-helper-functions-globally-available-to-single-file-components/42618631#comment105447005_42618631
Спасибо! Он хорошо работает в компонентах, но не в " магазине.js". У меня есть миксин, который настраивает " консоль.журнала" : "Журнал: НТР => консоли.журнала('%C 'на + ул. +' ', 'фон:#ААА; цвет:#FFF; обивка: 5 пикселей; границы-радиус: 5 пикселей')". Как я могу использовать его в магазине.Джей Си, пожалуйста ?
user3525949

06.03.2017 09:44:51

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

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

user2090357

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)
})
https://stackoverflow.com/questions/42613061/vue-js-making-helper-functions-globally-available-to-single-file-components/43343495#comment88015438_43343495
можете ли вы завершить ответ, показывающий, как использовать его в компоненте?
digout

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 в вашем проекте.

Закрыть X