Using mixins with Vuejs

Asked By: Anonymous

I’m currently learning how to develop an app with Vuejs. I have a main.js file with the code for setting up Vue.js. I created a new directory /mixins with a new file api.js. I want to use that as mixin so that every component can use a function to access my api. But I don’t know how to do it.

This is my /mixins/api.js file:

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

This is my main.js file:

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

How can I include my mixin the right way now, so that every component has access to the callapi() function?


Solution

Answered By: Anonymous

You can apply mixin globally using Vue.mixin

api.js
------

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

main.js
-------

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

Vue.mixin(CallAPI)

As the documentation states you should use it carefully:

Use global mixins sparsely and carefully, because it affects every single Vue instance created, including third party components.

techinplanet staff

techinplanet staff


Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen windows office 365 satın al follower kaufen instagram follower kaufen porno