How to use plugins in vuex (Vue 2x)

Viewed 36

I want to use my api plugin in Vuex. It's responding me 'undefined'. When i write console.log(this.$api.UserService) it's responding me 'undefined. But i can access Vue components this object. I was use this in Nuxt.js.

/plugins/api.js

import axios from "axios";
import jsCookie from "js-cookie";
import UserService from "../services/UserService";


const baseUrl = process.env.VUE_APP_API_URL;

const apiUser = baseUrl + "/api/user";
const api = axios.create({
  timeout: 1000,
  headers: {
    "X-Custom-Header": "foobar",
  },
});
api.interceptors.request.use(
  (config) => {
    config.headers.Authorization = `Bearer ${jsCookie.get("token")}`;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
api.UserService = new UserService(api, apiUser);

export default api

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import i18n from "./i18n";
import Vuelidate from "vuelidate";
import fontawesome from "./utils/fontawesome";
import api from "./plugins/api";
Vue.use(Vuelidate);
Vue.config.productionTip = false;
Vue.prototype.$api = api;


new Vue({
  fontawesome,
  router,
  store,
  i18n,
  render: (h) => h(App),
}).$mount("#app");

/store/login.js

  actions: {
    loginUser(_, payload) {
      this.$api.UserService.Login(payload.email, payload.password).then(
        (response) => {
          if (response.data.status) {
            console.log(response);
          }
        }
      );
    },
  }
0 Answers
Related