Vue.js - বিশ্বব্যাপী একক-ফাইলের উপাদানগুলিতে সহায়ক ফাংশন তৈরি করা

Question 1

আমার একটি ভ্যু 2 প্রকল্প রয়েছে যার অনেকগুলি (50+) একক-ফাইল উপাদান রয়েছে । আমি রাউটিংয়ের জন্য ভ্যু-রাউটার এবং রাজ্যের জন্য ভিউক্স ব্যবহার করি।

হেল্পার্স.জেস নামে একটি ফাইল রয়েছে যা সাধারণ-উদ্দেশ্যমূলক ফাংশনগুলির একটি গুচ্ছ ধারণ করে, যেমন একটি স্ট্রিংয়ের প্রথম অক্ষরকে মূলধন করে। এই ফাইলটি দেখতে এমন দেখাচ্ছে:

export default {
    capitalizeFirstLetter(str) {
        return str.charAt(0).toUpperCase() + str.slice(1);
    }
}

আমার মেইন.জেএস ফাইলটি অ্যাপ্লিকেশন শুরু করে:

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>ভ্যু-রাউটারটি App.vue টেমপ্লেটে ট্যাগের অভ্যন্তরে নেভিগেট করতে পরিচালনা করে ।

এখন বলা যাক যে সামোমিকম্পোনেন্ট.ভ্যুতেcapitalizeFirstLetter() সংজ্ঞায়িত এমন উপাদানটির ভিতরে আমার ফাংশনটি ব্যবহার করা দরকার । এটি করার জন্য, আমাকে প্রথমে এটি আমদানি করতে হবে:

<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, বা এর অভ্যন্তরের ক্রিয়াকলাপগুলির নাম পরিবর্তন করতে চাই, তবে আমাকে তখন আমদানি করা প্রতিটি উপাদানগুলিতে যেতে হবে এবং আমদানির বিবরণীটি পরিবর্তন করতে হবে।

দীর্ঘ গল্প সংক্ষিপ্ত: আমি কীভাবে হেল্পার্স.জেস এর অভ্যন্তরীণ ফাংশনগুলি বিশ্বব্যাপী উপলভ্য করব যাতে আমি তাদের যে কোনও উপাদানগুলির মধ্যে প্রথমে আমদানি না করে কল করতে পারি এবং তারপরে thisফাংশনটির নামটি সংশোধন করতে পারি? আমি মূলত এটি করতে সক্ষম হতে চাই:

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

Question 2

প্রথমে সেগুলি আমদানি না করে যে কোনও উপাদানগুলির ভিতরে and

আপনি যা বর্ণনা করেছেন তা হ'ল মিক্সিন ।

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

Question 3

অন্যথায়, আপনি আপনার সহায়তাকারীদের একটি প্লাগইন কাজ করতে চেষ্টা করতে পারেন:

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

Question 4

একটি নতুন মিশ্রণ তৈরি করুন:

"এসআরসি / মিক্সিনস / জেনারেল মিক্সিন.জেএস"

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

তারপরে এটি আপনার মেইনজেজেসগুলিতে ইম্পোর্ট করুন:

import '@/mixins/generalMixin'

এখন থেকে আপনি this.capitalizeFirstLetter(str)নিজের উপাদান স্ক্রিপ্টের মধ্যে বা কোনও thisটেম্পলেট ছাড়াই ফাংশনটি ব্যবহার করতে সক্ষম হবেন ।

আপনাকে ব্যবহার করতে হবে thisকারণ আপনি একটি মূল পদ্ধতিটি ভ্যু উদাহরণের সাথে মিশ্রিত করেছেন। যদি thisএটি অপসারণের উপায়গুলি সম্ভবত অপ্রচলিত কিছু জড়িত, তবে এটি কমপক্ষে একটি কার্যকরী ভাগ করার একটি নথিভুক্ত উপায় যা আপনার প্রকল্পের ভবিষ্যতের কোনও ভ্যু ডেভসগুলির পক্ষে বোঝা সহজ।

Question 5

ওয়েবপ্যাক ভি 4 ব্যবহার করে

পঠনযোগ্যতার জন্য একটি পৃথক ফাইল তৈরি করুন (স্রেফ খনি প্লাগিন ফোল্ডারে ফেলে দেওয়া হয়েছে)। @ কোডিনকিটিক্স এবং @ ডিগআউট প্রতিক্রিয়া থেকে পুনরুত্পাদন করা

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

তারপরে আপনার মেইন.জেস বা অ্যাপ্লিকেশন.জেএস ফাইলটি আমদানি করুন

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

ব্যবহার:

কল করুন this.sampleFunction()বাthis.capitalizeFirstLetter()

Question 6

কোনও বৈশ্বিক ফিল্টার ব্যবহার করুন যদি এটি কেবল রেন্ডার করার সময় ডেটা ফর্ম্যাট করা হয় তা নিয়ে উদ্বেগ প্রকাশ করে। ডক্সে এটি প্রথম উদাহরণ :

{{ message | capitalize }}

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

Question 7

দুর্দান্ত প্রশ্ন। আমার গবেষণায় আমি খুঁজে পেয়েছি ভ্যু-ইনজেকশন এটিকে সেরা উপায়ে পরিচালনা করতে পারে। আমার অনেক ফাংশন লাইব্রেরি (পরিষেবাদি) স্ট্যান্ডার্ড ভ্যু উপাদান লজিক হ্যান্ডলিং পদ্ধতি থেকে পৃথক রাখা হয়েছে। আমার পছন্দটি হল উপাদানগুলির পদ্ধতিগুলি কেবল প্রতিনিধি হওয়া উচিত যা পরিষেবা ফাংশনগুলিকে কল করে।

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

Question 8

এটিকে 'স্টোর' এর মতো মেইন.জেএস ফাইলটিতে আমদানি করুন এবং আপনি সমস্ত উপাদানগুলিতে এটি অ্যাক্সেস করতে পারবেন।

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