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

Answer 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