Vue - 全局导入

【问题标题】：Vue - global importVue - 全局导入
【发布时间】：2018-12-04 09:27:11
【问题描述】：

我用

import {mapFields} from "vuex-map-fields"

在每个组件中。

如何在无需导入的情况下使其在每个组件中都可用？这有什么风险吗？

【问题讨论】：

标签： javascript vue.js import global

【解决方案1】：

如果你想全局使用它，你必须将它注入到 Vue 实例中与我们使用 vuex 时的方式相同

main.js

import Vue from 'vue'
import store from './store'

new Vue( {
  el: '#app',
  store,
  render: h => h( App )
} );

那么在任何组件中你都可以console.log(this);你应该能够看到你的对象

【讨论】：

【解决方案2】：

你可以使用 Vue.prototype 如下..

[src/main.js]

import { mapFields } from 'vuex-map-fields';
...
Vue.prototype.$mapFields = mapFields;

那么在任何组件中你都可以使用 this.$mapFields(...) 函数！

[在任何组件中]

<template>
......
</template>

<script>
export default {
  computed: {
    ...this.$mapFields({
      userFirstName: 'user.firstName',
      userLastName: 'user.lastName',
    }),
  },
};
</script>

这段代码没有风险...

【讨论】：