在js中使用mixins

Using mixins with Vuejs

本文关键字：mixins js      更新时间：2023-09-26

我目前正在学习如何开发一个应用程序与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()函数?

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

mixin.js 

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

component.vue 

import mixin from 'mixin';
export default {
  mixins: [ mixin ]
}
你可以考虑的另一件事是使用组件扩展设计模式，即创建一个基本组件，然后在子组件中继承它。如果你有许多组件共享许多选项，并且可能也继承了模板，那么它会让代码保持DRY。

如果你感兴趣的话，我已经在我的博客上写过了。

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

api.js
------
export default {
  methods: {
    callapi() {};
  }
}
main.js
-------
import CallAPI from './mixins/api.js';
Vue.mixin(CallAPI)

正如文档所述，您应该小心使用它:

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

相关文章：