Vue.js - Yardımcı işlevleri tek dosyalı bileşenlere küresel olarak sunma

Birçok (50+) tek dosya bileşenine sahip bir Vue 2 projem var . Yönlendirme için Vue-Router ve durum için Vuex kullanıyorum.

Bir dizenin ilk harfini büyük harfle yazmak gibi bir dizi genel amaçlı işlevi içeren helpers.js adlı bir dosya vardır . Bu dosya şuna benzer:

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

Benim main.js dosya uygulamasını başlatır:

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

Benim App.vue dosyası şablonunu içerir:

<template>
    <navbar></navbar>
    <div class="container">
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //stuff
        }
    }
}
</script>

Daha sonra, Vue-Router'ın <router-view>App.vue şablonundaki etiketin içine gitmeyi yönettiği bir sürü tek dosyalı bileşenim var.

Şimdi, capitalizeFirstLetter()fonksiyonu SomeComponent.vue içinde tanımlanan bir bileşenin içinde kullanmam gerektiğini varsayalım . Bunu yapmak için önce içeri aktarmam gerekiyor:

<template>Some Component</template>

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

Bu hızlı bir sorun haline geliyor, çünkü sonunda işlevi hepsi olmasa da birçok farklı bileşene aktarıyorum. Bu tekrarlayıcı görünüyor ve aynı zamanda projenin sürdürülmesini zorlaştırıyor. Örneğin, helpers.js'yi veya içindeki işlevleri yeniden adlandırmak istersem, onu içe aktaran her bileşene girmem ve içe aktarma ifadesini değiştirmem gerekir.

Uzun lafın kısası: helpers.js içindeki işlevleri global olarak kullanılabilir hale getirebilirim, böylece onları herhangi bir bileşenin içinde önce içeri aktarmak ve ardından thisişlev adının başına eklemek zorunda kalmadan çağırabilirim ? Temelde bunu yapabilmek istiyorum:

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

herhangi bir bileşenin içinde, önce bunları içe aktarmak ve ardından bunu işlev adının başına ekleyin

Tarif ettiğin şey mixin .

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

Bu küresel bir karışımdır. bununla TÜM bileşenlerinizin bir capitalizeFirstLetteryöntemi olacaktır , böylece this.capitalizeFirstLetter(...)bileşen yöntemlerinden çağırabilir veya doğrudan olarak çağırabilirsiniz.capitalizeFirstLetter(...) bileşen şablonunda .

Çalışma örneği: http://codepen.io/CodinCat/pen/LWRVGQ?editors=1010

Buradaki belgelere bakın: https://vuejs.org/v2/guide/mixins.html

Aksi takdirde, yardımcılarınızın bir eklenti çalıştırmasını deneyebilirsiniz:

import Vue from 'vue'
import helpers from './helpers'

const plugin = {
  install () {
    Vue.helpers = helpers
    Vue.prototype.$helpers = helpers
  }
}

Vue.use(plugin)

Senin içinde helper.jsFonksiyonlarınızdan ihracat, bu şekilde:

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

veya

export default { 
  capFirstLetter(val) {
    return val.charAt(0).toUpperCase() + val.slice(1);
  },
  img2xUrl(val) {
    return `${val.replace(/(\.[\w\d_-]+)$/i, '@2x$1')} 2x`;
  },
};

Daha sonra bunları kullanarak bileşenlerinizin herhangi bir yerinde kullanabilmelisiniz:

this.$helpers.capitalizeFirstLetter()

veya uygulamanızın herhangi bir yerinde şunları kullanarak:

Vue.helpers.capitalizeFirstLetter()

Bununla ilgili daha fazla bilgiyi belgelerde bulabilirsiniz: https://vuejs.org/v2/guide/plugins.html

Yeni bir karışım oluşturun:

"src / mixins / generalMixin.js"

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

Ardından aşağıdaki gibi main.js'ye aktarın:

import '@/mixins/generalMixin'

Şu andan itibaren, işlevi this.capitalizeFirstLetter(str)bileşen komut dosyanızın içinde veya thisbir şablon olmadan kullanabileceksiniz . yani:

<template>
    <div>{{ capitalizeFirstLetter('hello') }}</div>
</template>

With kullanarak <script />, thisbir yöntemi ana Vue örneğine karıştırdığınız için kullanmanız gerekir . Kaldırmanın yolları thisvarsa, muhtemelen alışılmadık bir şey içerecektir, bu en azından, projeniz için gelecekteki herhangi bir Vue geliştiricisi için anlaşılması kolay olacak belgelenmiş bir işlevleri paylaşma yoludur .

Webpack v4'ü kullanma

Okunabilirlik için ayrı bir dosya oluşturun (benimki eklentiler klasörüne düştü). @CodinCat ve @digout yanıtlarından çoğaltılmıştır

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

Ardından main.js veya app.js dosyanıza içe aktarın

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

KULLANIM:

Çağrı this.sampleFunction()veyathis.capitalizeFirstLetter()

Yalnızca verilerin işlendiğinde nasıl biçimlendirildiğiyle ilgiliyse genel bir filtre kullanın. Bu, dokümanlardaki ilk örnektir :

{{ message | capitalize }}

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

Harika soru. Araştırmamda vue-inject'in bunu en iyi şekilde halledebileceğini buldum. Standart vue bileşen mantık işleme yöntemlerinden ayrı tutulan birçok işlev kitaplığım (hizmetim) var. Benim seçimim, bileşen yöntemlerinin yalnızca hizmet işlevlerini çağıran temsilciler olması.

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

Bunu main.js dosyasında 'depolamak' gibi içe aktarın ve ona tüm bileşenlerden erişebilirsiniz.

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