Call Mixin global method from Vuex

Question

I have a mixin like this with a request method to call axios and handle errors, etc.:

import Vue from 'vue'
import axios from 'axios';
    
Vue.mixin({
    methods: {
        request(url, datas) {

        //Call axios and return premise
        [...]
    }
});

I have a store like this :

const actions = {
    selectEmployees: (store, keywords) => {
        this.request(`/users/list/search{/keywords}`).then(e => {
            store.commit('SELECT_EMPLOYEES', e.data)
        });
    }
}
    
let store = new Vuex.Store({
    state: state,
    mutations: mutations,
    getters: getters,
    actions: actions
})

I would like to use request to call axios but I have this error:

Error in mounted hook: "TypeError: Cannot read property 'request' of undefined" TypeError: Cannot read property 'request' of undefined

Solution 1

Mixins, as stated from the docs, are used for components. Vuex is not a component itself. As I can see you're using the new import/export ways of working, just make your mixing a simple functions that are exported. Then elsewhere either attach them to Vue as mixin, or use it externally in the store. Something along the lines (semi code):

// mixin.js
export default function request() {}

// main.js
Vue.mixin({
    methods: {
        request: mixin.request // will provide this.request in each component
    }
}

// store.js
mixin.request() // will fire the method

Solution 2

Since the request method is in the mixin's methods obj

// store.js 
import mixin from './mixin'

// access mixin method
mixin.methods.request()

Comments

[Jonas D.]

And how would you obtain the mixin within store.js? 🤔

[Andrey Popov]

As import mixin from './wherever/the/file/is';

[Marcelo Rodovalho]

And if I want to call the Global Mixin form a vue instance? vm = new Vue() vm.mixinMethod()??

[matrix4use]

IN THIS CASE if you import mixin from './wherever/the/file/is'; then you can't do mixin.request() as suggested above, rather you would call it as mixin() to fire the function.

[Cathy Ha]

Not sure about best practice or whatnot but this worked like a charm

[Emobe]

This defeats the purpose of mixins.

[ManUtopiK]

You named main.js the file where the mixin is instantiated, and mixin.js the file where are the shared functions. It should be inverse? It's not very clear...

[Andrey Popov]

Well mixin.js is the file where the mixin is defined, while main.js is the place where the mixin is used. It makes sense to name the files based on what is the main idea of the code inside, right?

[vikash]

Way to access methods is perfectly working fine for me also, but the $data variable is not accessible of mixin.js from store.js. could you please help me here?

[Michael]

@Emobe Can you elaborate on why this defeats the purpose of mixins and offer a solution that does not?

[Emobe]

@Michael Mixins are to be used within a component's mixin property. This is just essentially a helper/utility.