[解決済み] Vue.js - シングルファイルコンポーネントでヘルパー関数をグローバルに利用できるようにする

質問

Vue 2のプロジェクトで、多くの(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> タグの中にあります。

では、例えば 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>

これはすぐに問題になります。なぜなら、すべてではないにしても、多くの異なるコンポーネントに関数をインポートすることになってしまうからです。これは繰り返しのように見え、また、プロジェクトを維持するのが難しくなります。たとえば、helper.js またはその中の関数の名前を変更したい場合、それをインポートするすべてのコンポーネントに移動して、import 文を修正する必要があります。

長い話を短くします。 helpers.js内の関数を グローバルに の中で呼び出せるようにするにはどうしたらよいでしょうか？ の中で呼び出すことができます。 コンポーネントの中で呼び出すことができます。 this を関数名の前に付けることなく？私は基本的にこれを行うことができるようにしたい。

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

どのように解決するのですか？

コンポーネントの内部で、最初にそれらをインポートし、次に関数名の前にこれを追加することなく

あなたが説明したことは ミキシン .

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