web-dev-qa-db-ja.com

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>

その後、Vue-RouterがApp.vueテンプレートの<router-view>タグ内への移動を処理する単一ファイルコンポーネントを多数用意しています。

ここで、SomeComponent.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またはその中の関数の名前を変更する場合は、それをインポートするすべての単一コンポーネントに移動し、importステートメントを変更する必要があります。

長編：helpers.js内の関数をどのように作成すればよいかグローバルに最初にそれらをインポートしてから関数名の前にthisを追加することなく、anyコンポーネント内で呼び出しますか？私は基本的にこれを行うことができるようにしたい：

<script>
export default {
    data() {
        return {
            myString = "test"
        }
    },
    created() {
         var newString = capitalizeFirstLetter(this.myString)
    }
}
</script>
vue.jsvue-router
54
Ege Ersoz

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

説明したのは、mixinです。

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

これはグローバルミックスインです。これにより、コンポーネントにはcapitalizeFirstLetterメソッドが含まれるので、this.capitalizeFirstLetter(...)を呼び出すことができます

作業例： http://codepen.io/CodinCat/pen/LWRVGQ?editors=101

こちらのドキュメントをご覧ください： https://vuejs.org/v2/guide/mixins.html

100
CodinCat

それ以外の場合は、ヘルパーをプラグインとして機能させることができます。

2018年3月1日編集：

プラグインを作成する公式の方法は、インストール関数でオブジェクトを作成することです：

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

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

Vue.use(plugin)

その後、コンポーネントのどこででも使用できるようになります：

this.$helpers.capitalizeFirstLetter()

またはアプリケーションのどこでも使用できます：

Vue.helpers.capitalizeFirstLetter()

詳細については、ドキュメントをご覧ください： https://vuejs.org/v2/guide/plugins.html

古い応答：

import helpers from './helpers';
export default (Vue) => {
    Object.defineProperties(Vue.prototype, {
        $helpers: {
            get() {
                return helpers;
            }
        }
    });
};

次に、main.jsファイルで：

import Vue from 'vue'
import helpersPlugin from './helpersPlugin';

Vue.use(helpersPlugin);

ソース： https://Gist.github.com/logaretm/56126af5867e391ea9507b462259caf

34
Hammerbot

「ストア」と同様に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)
})
1
user2090357

いい質問ですね。私の研究では、vue-injectがこれを最適な方法で処理できることを発見しました。標準のvueコンポーネントロジック処理メソッドとは別に保持されている多くの関数ライブラリ（サービス）があります。私の選択は、コンポーネントメソッドを、サービス関数を呼び出す委任者だけにすることです。

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

0
user3525949