CODEWITHSUNDEEP
vue.jsvuex
AllenC
AllenC

Reputation: 2754

Vuex Axios headers returns Uncaught TypeError: Object(...) is not a function from Vuex

I'm currently using Nuxt and I created a central ApiClient in my app using axios.

services/apiClient.js

import axios from "axios";
import store from '../store/index';

const token = () => {
  return store().getters.getToken;
};

const axiosClient = axios.create({
  baseURL: "this-is-a-url",
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'X-Api-Key': token() // this returns error: Object(...) is not a function from Vuex
  }
});

axiosClient.interceptors.request.use(function (config) {
  console.log(token()); // this prints the token type string
  return config;
}, function (error) {
  return Promise.reject(error);
});

When I use the token() in axios headers, I'm getting the error: Uncaught TypeError: Object(...) but when I call it from axios interceptor I'm getting the correct token type String.

store/index.js

import Vuex from 'vuex';
import * as sessions from './modules/sessions';

const store = () => {
  return new Vuex.Store({
    getters: {
      isAuthenticated() {
        return sessions.state.token != null;
      }
    },
    modules: {
      sessions
    }
  });
};

export default store;

store/modules/sessions.js

import axios from 'axios';

export const state = {
  token: localStorage.getItem('token') || null,
};

export const mutations = {
  SET_TOKEN(state, token) {
    state.token = token;
  }
};

export const actions = {
  login({ commit }) {
    return new Promise((resolve, reject) => {
      axios.get(`/retrieveKey`)
        .then(response => {
          localStorage.setItem('token', response.data.value);
          commit('SET_TOKEN', response.data.value);
          resolve(response.data);
        })
        .catch(error => {
          reject(error);
        });
    });
  },
  logout({ commit }, context) {
    localStorage.removeItem('token');
    window.location.reload();
  }
};

export const getters = {
  getToken(state) {
    return state.token;
  }
};

Upvotes: 1

Views: 1899

Answers (1)

V-SHY
V-SHY

Reputation: 4125

Latest answer

May be you can put console.log to debug the value of store(), store().getters and store().getters.getToken inside the token function like below and compare the difference values between axiosClient call and interceptors call.

const token = () => {
  const store = store();
  const getters = store.getters;
  const getToken = getter.getToken;
  console.log(store, getters, getToken)
  return getToken;
};

Error message of "this returns error: Object(...) is not a function from Vuex" is because of token is equal to null in axiosClient.

It is because of Initial state of the localStorage.getItem('token') is null/undefined and hence its value becomes null before the login done.

export const state = {
  token: localStorage.getItem('token') || null,
};

Refer to Getters of Vuex guide, the getters will be exposed on the store.getters object, and you access values as properties.

May be you can get the token value via store.getters.getToken instead of store().getters.getToken?

Upvotes: 1

Related Questions