Vue.js-ヘルパー関数を単一ファイルのコンポーネントでグローバルに使用可能にする

多くの（50以上の）単一ファイルコンポーネントを含む Vue 2プロジェクトがあります。ルーティングには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>

次に<router-view>、一連の単一ファイルコンポーネントを用意します。Vue -Router は、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開発者が理解しやすい、機能を共有するための文書化された方法です。

すばらしい質問です。私の研究では、vue-injectがこれを最良の方法で処理できることを発見しました。多くの関数ライブラリ（サービス）を、標準のVueコンポーネントロジック処理メソッドとは別に保持しています。私の選択は、コンポーネントメソッドをサービス関数を呼び出すデリゲーターにすることです。

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

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

'store'のようにmain.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)
})