Vue。js-使助手函数对单个文件组件全局可用

Question

我有一个VUE2项目，它有许多（50）个单文件组件。我使用Vue路由器进行路由，Vuex用于状态。

有一个名为helpers.js的文件，其中包含一系列通用函数，例如将字符串的第一个字母大写。这个文件看起来像这样：

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

我的主菜。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路由器处理这些组件，导航到内部

现在让我们假设我需要在一个组件中使用assetazeFirst信（）函数，该组件在omponent.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>

这很快就会成为一个问题，因为我最终将函数导入到许多不同的组件中，如果不是全部的话。这似乎是重复的，也使项目更难维护。例如，如果我想重命名帮助程序。js或其中的函数，然后我需要进入导入它的每个组件并修改import语句。

长话短说：如何在helpers中实现函数。js全局可用，这样我就可以在任何组件内调用它们，而不必先导入它们，然后在函数名前添加this？我基本上希望能够做到这一点：

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




Answer 1

匿名用户

创建一个新的混合：

"src/混合/通用ixin.js"

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

然后将其导入到主应用程序中。比如：

import '@/mixins/generalMixin'

从现在起，您将能够使用类似这样的函数。在组件脚本中使用大写字母firstletter（str），或者在模板中不使用此。即。：

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

您必须使用此，因为您在主Vue实例中混合了一个方法。如果有方法删除此，它可能会涉及一些非常规的内容，那么这至少是一种有文档记录的共享功能的方法，对于任何未来的Vue开发人员来说，这对您的项目来说都很容易理解。

Answer 2

否则，您可以尝试让助手使用插件：

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

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

Vue.use(plugin)

在您的助手中。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`;
  },
};

然后，您应该能够使用以下工具在组件中的任何位置使用它们：

这个$帮手。大写字母firstletter（）

或应用程序中的任何地方使用：

Vue。帮手。大写字母firstletter（）

你可以在留档中了解更多：https://vuejs.org/v2/guide/plugins.html

Answer 3

在任何组件中，而不必首先导入它们，然后将其前置到函数名中

你所描述的是混合。

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

这是一个全局混合。有了这个，你的所有组件都将有一个资本第一字母方法，所以你可以从组件方法中调用this.capitalize第一字母（...）或者你可以直接调用它作为资本第一字母（...）在组件模板中。

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

请参阅这里的留档：https://vuejs.org/v2/guide/mixins.html