使用带有Vuejs的mixins

Question

我目前正在学习如何使用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');

我现在如何以正确的方式包含我的mix,以便每个组件都可以访问该callapi()功能？

Answer 1

如果你想在特定组件而不是所有组件上使用mixin ,你可以这样做:

mixin.js

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

component.vue

import mixin from 'mixin';

export default {
  mixins: [ mixin ]
}

您可能考虑的另一件事是使用组件扩展设计模式,即创建基本组件,然后从子组件继承.如果您有许多组件共享许多选项并且可能继承模板,那么它会更复杂但保持代码DRY.

如果你有兴趣,我已经在我的博客上写过这篇文章.

Answer 2

您可以全局使用mixin Vue.mixin

api.js
------

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

main.js
-------

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

Vue.mixin(CallAPI)

正如文档所述,您应该仔细使用它:

稀疏地小心使用全局mixin,因为它会影响每个创建的Vue实例,包括第三方组件.