Javascript 在Vuejs中使用mixin

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

这是我的

/mixins/api.js

文件：

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

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

这是我的

main.js

文件：

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

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（）

函数？

您可以使用

Vue.mixin

api.js
------

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

main.js
-------

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

Vue.mixin(CallAPI)

如前所述，您应谨慎使用：

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

---

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

mixin.js

组件.vue

您可以考虑使用组件扩展设计模式，即创建一个基本组件，然后从子组件中继承该组件。如果有许多组件共享许多选项，并且可能也继承了模板，那么它会更复杂一些，但会保持代码干燥

如果你感兴趣的话，我已经写过了