首页 文章

Vue.js - 使帮助函数全局可用于单文件组件

提问于
浏览 次
35

我有一个Vue 2项目有很多（50）single-file components . 我使用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语句 .

Long story short: 如何使helpers.js中的函数全局可用，以便我可以在任何组件内调用它们而不必先导入它们然后将 this 添加到函数名中？我基本上希望能够做到这一点：

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

4 回答

  • 64

    在任何组件内部，无需先导入它们，然后将其添加到函数名称中

    你所描述的是 mixin .

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

    这是一个全球性的混合体 . 使用此所有组件将具有 capitalizeFirstLetter 方法，因此您可以调用 this.capitalizeFirstLetter(...)

    工作示例：http://codepen.io/CodinCat/pen/LWRVGQ?editors=1010

    请参阅此处的文档：https://vuejs.org/v2/guide/mixins.html

    回复于
  • 0

    否则，您可以尝试让您的帮助程序运行插件：

    EDIT March 1st 2018:

    制作插件的官方方法是使用安装功能创建一个对象：

    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

    Old response:

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

    Source ：https://gist.github.com/logaretm/56126af5867e391ea9507b462259caf3

    回复于
  • 1

    好问题 . 在我的研究中，我发现vue-inject可以以最好的方式处理这个问题 . 我有许多功能库（服务）与标准的vue组件逻辑处理方法分开 . 我的选择是让组件方法只是调用服务功能的委托人 .

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

    回复于
  • 19

    将它导入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)
})
    回复于

相关问题