Vue.js - एकल-फ़ाइल घटकों के लिए विश्व स्तर पर सहायक कार्य उपलब्ध कराना

Question

मेरे पास एक Vue 2 परियोजना है जिसमें कई (50+) एकल-फ़ाइल घटक हैं । मैं रूटिंग और राज्य के लिए Vuex के लिए Vue-Router का उपयोग करता हूं।

एक फाइल है, जिसे हेल्पर्स.जेएस कहा जाता है , जिसमें सामान्य उद्देश्य वाले कार्यों का एक गुच्छा होता है, जैसे कि एक स्ट्रिंग के पहले अक्षर को कैपिटलाइज़ करना। यह फाइल इस तरह दिखती है:

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>

यह जल्दी से एक समस्या बन जाती है क्योंकि मैं अंत में फ़ंक्शन को कई अलग-अलग घटकों में आयात करता हूं, अगर उनमें से सभी नहीं। यह दोहराव लगता है और परियोजना को बनाए रखने के लिए कठिन भी बनाता है। उदाहरण के लिए यदि मुझे हेल्पर्स.जैस, या उसके अंदर के कार्यों का नाम बदलना है, तो मुझे हर एक घटक में जाने की जरूरत है जो इसे आयात करता है और आयात विवरण को संशोधित करता है।

लंबी कहानी छोटी: मैं विश्व स्तर पर हेल्पर्स.जैस के अंदर फंक्शंस कैसे उपलब्ध करवाता हूं ताकि मैं उन्हें किसी भी कंपोनेंट के अंदर कॉल कर सकूं और फिर thisफंक्शन के नाम पर प्रीप्रेंड कर सकूं । मैं मूल रूप से ऐसा करने में सक्षम होना चाहता हूं:

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

Comments

आप एक वैश्विक मिश्रण का उपयोग कर सकते हैं, लेकिन आपको उपयोग करना होगा this।

— बर्ट

क्या आपने अपने सहायकों को फ़िल्टर के रूप में उजागर करने पर विचार किया है ताकि उन्हें आयात करने की आवश्यकता के बिना सीधे आपके टेम्पलेट में उपयोग किया जा सके? यही रणनीति मैं ले रहा हूं और यह अब तक अच्छा काम कर रहा है।

— डेविड वेल्डन

Answer 1

किसी भी घटक के बिना पहले उन्हें आयात करने के लिए और फिर इसे फ़ंक्शन नाम पर प्रीपेन्ड करें

आपने जो वर्णन किया है वह मिक्सिन है ।

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

Comments

अच्छा है! धन्यवाद!

— एलेक्सी शबरमोव

इस उत्तर में अधिक जानकारी होना अच्छा होगा जैसे कि आप मिक्सिन फंक्शन को अपनी समर्पित फ़ाइल में कैसे स्टोर करते हैं और आप इसे main.js में कैसे आयात करते हैं?

— एलेक्सिस। रोलैंड

मैं capitalizeFirstLetterएक const vm = new Vue()उदाहरण से कैसे उपयोग कर सकता हूं ? क्योंकि vm.capitalizeFirstLetterकाम नहीं करता है।

— मार्सेलो रोडोवल्हो

क्या सभी घटक मिश्रण में capitalizeFirstLetterफ़ंक्शन को संदर्भित कर रहे हैं या क्या उनकी अपनी प्रति होगी? मैं एक फ़ंक्शन को संग्रहीत करने के लिए एक जगह की तलाश कर रहा हूं जो हर घटक के लिए सुलभ होनी चाहिए, लेकिन अन्यथा उनके साथ असंबंधित हो (एक vuex भंडारण में स्टोर करने के लिए एक सर्वर से डेटा प्राप्त करें)

— डैनियल एफ

धन्यवाद ! यह घटकों में अच्छी तरह से काम करता है लेकिन "store.js" में नहीं। मेरे पास एक मिश्रण है जो "कंसोल.लॉग" को अनुकूलित करता है: "लॉग: str => कंसोल.लॉग ('% c' + str + ''," पृष्ठभूमि: #aaa; रंग: #fff; गद्दी: 5px; बॉर्डर-) त्रिज्या: 5px ') "। कृपया इसे store.js में कैसे उपयोग कर सकते हैं?

— बैराक्स

Answer 2

अन्यथा, आप अपने सहायकों को एक प्लगइन बनाने की कोशिश कर सकते हैं:

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

Comments

कृपया सहायकों की सामग्री को सूचीबद्ध करें। सेव

— Marius

क्या आप Vue store को एक्सेस करने के तरीके पर एक उदाहरण शामिल कर सकते हैं? यह $ स्टोर घटकों में काम करता है, लेकिन एक मिश्रण में नहीं।

— मारियस

हेल्पर्स.जेएस की सामग्री प्रश्न में है

— हैमरबोट

Answer 3

एक नया मिश्रण बनाएँ:

"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इसे हटाने के तरीके हैं, तो संभवतः कुछ अपरंपरागत शामिल होंगे, यह कम से कम कार्यों को साझा करने का एक प्रलेखित तरीका है , जो आपके प्रोजेक्ट के किसी भी भविष्य के वीयू देवों के लिए समझना आसान होगा।

Answer 4

बड़ा सवाल है। अपने शोध में मैंने पाया कि वाउ-इंजेक्शन इसे सबसे अच्छे तरीके से संभाल सकता है। मेरे पास कई फ़ंक्शन लाइब्रेरी (सेवाएं) मानक vue घटक लॉजिक हैंडलिंग विधियों से अलग रखी गई हैं। मेरी पसंद घटक विधियों को बस प्रतिनिधि होना चाहिए जो सेवा कार्यों को कहते हैं।

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

Answer 5

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

Answer 6

इसे मुख्य .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)
})

Comments

क्या आप एक घटक में इसका उपयोग करने के तरीके का जवाब पूरा कर सकते हैं?

— जीनवैलजेन