Vue.js - ทำให้ฟังก์ชันตัวช่วยพร้อมใช้งานทั่วโลกสำหรับคอมโพเนนต์ไฟล์เดียว

ฉันมี 2 โครงการ Vue ที่มีจำนวนมาก (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>

จากนั้นฉันมีส่วนประกอบไฟล์เดียวจำนวนมากซึ่ง 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>

สิ่งนี้กลายเป็นปัญหาอย่างรวดเร็วเพราะท้ายที่สุดแล้วฉันจะนำเข้าฟังก์ชันไปยังส่วนประกอบต่างๆมากมายหากไม่ใช่ทั้งหมด สิ่งนี้ดูเหมือนจะซ้ำซากและยังทำให้โครงการดูแลรักษายากขึ้น ตัวอย่างเช่นถ้าฉันต้องการเปลี่ยนชื่อ helpers.js หรือฟังก์ชั่นที่อยู่ในนั้นฉันต้องเข้าไปในทุกองค์ประกอบเดียวที่นำเข้าและแก้ไขคำสั่งนำเข้า

เรื่องสั้นขนาดยาว:ฉันจะทำให้ฟังก์ชั่นภายใน helpers.js พร้อมใช้งานทั่วโลกได้อย่างไรเพื่อให้ฉันสามารถเรียกใช้งานภายในส่วนประกอบใดก็ได้โดยไม่ต้องนำเข้าก่อนแล้วจึงนำหน้าthisนำหน้าชื่อฟังก์ชัน โดยพื้นฐานแล้วฉันต้องการที่จะทำได้:

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

ภายในส่วนประกอบใด ๆ โดยไม่ต้องนำเข้าก่อนจากนั้นนำหน้าสิ่งนี้ไปที่ชื่อฟังก์ชัน

สิ่งที่คุณอธิบายmixin

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

มิฉะนั้นคุณสามารถพยายามทำให้ผู้ช่วยของคุณทำงานเป็นปลั๊กอิน:

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

สร้างมิกซ์อินใหม่:

"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อาจเกี่ยวข้องกับสิ่งที่ไม่เป็นทางการอย่างน้อยนี่เป็นวิธีการแบ่งปันฟังก์ชันที่มีเอกสารซึ่งจะเข้าใจง่ายสำหรับนักพัฒนา Vue ในอนาคตในโครงการของคุณ

ใช้ Webpack v4.2

สร้างไฟล์แยกต่างหากเพื่อให้อ่านง่าย (เพิ่งทิ้งของฉันลงในโฟลเดอร์ปลั๊กอิน) ทำซ้ำจากการตอบสนองของ @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()

ใช้ตัวกรองส่วนกลางหากเกี่ยวข้องกับการจัดรูปแบบข้อมูลเมื่อแสดงผลเท่านั้น นี่คือตัวอย่างแรกในเอกสาร :

{{ message | capitalize }}

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

คำถามที่ดี ในการวิจัยของฉันฉันพบว่า vue-injection สามารถจัดการกับสิ่งนี้ได้ดีที่สุด ฉันมีไลบรารีฟังก์ชัน (บริการ) จำนวนมากที่แยกออกจากวิธีการจัดการตรรกะส่วนประกอบ 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)
})