在 Vuejs 中使用 mixins答案

【问题标题】：Using mixins with Vuejs在 Vuejs 中使用 mixins
【发布时间】：2017-01-14 11:14:53
【问题描述】：

我目前正在学习如何使用 Vuejs 开发应用程序。我有一个 main.js 文件，其中包含设置 Vue.js 的代码。我使用新文件 api.js 创建了一个新目录 /mixins。我想将它用作 mixin，以便每个组件都可以使用一个函数来访问我的 api。但我不知道该怎么做。

这是我的/mixins/api.js 文件：

export default{
  callapi() {
    alert('code to call an api');
  },
};

这是我的main.js 文件：

import Vue from 'vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';

import { configRouter } from './routeconfig';

import CallAPI from './mixins/api.js';

// Register to vue
Vue.use(VueResource);
Vue.use(VueRouter);


// Create Router
const router = new VueRouter({
  history: true,
  saveScrollPosition: true,
});

// Configure router
configRouter(router);


// Go!
const App = Vue.extend(
  require('./components/app.vue')
);

router.start(App, '#app');

我现在如何才能以正确的方式包含我的 mixin，以便每个组件都可以访问 callapi() 函数？

【问题讨论】：

标签： javascript vue.js mixins

【解决方案1】：

如果你想在一个特定组件上使用mixin，而不是所有组件，你可以这样做：

mixin.js

export default {
  methods: {
    myMethod() { .. }
  }
}

component.vue

import mixin from 'mixin';

export default {
  mixins: [ mixin ]
}

您可能会考虑的另一件事是使用组件扩展设计模式，即创建一个基本组件，然后在子组件中从该组件继承。如果您有许多共享许多选项并且可能还继承模板的组件，它会涉及更多但保持代码干燥。

如果你有兴趣，我已经写了on my blog。

【讨论】：

【解决方案2】：

您可以使用 Vue.mixin 全局应用 mixin

api.js
------

export default {
  methods: {
    callapi() {};
  }
}

main.js
-------

import CallAPI from './mixins/api.js';

Vue.mixin(CallAPI)

正如documentation 所说，您应该谨慎使用它：

谨慎使用全局 mixins，因为它会影响创建的每个 Vue 实例，包括第三方组件。

【讨论】：