Vuex Axios 헤더에서 Uncaught TypeError를 반환함: 개체(...)가 Vuex의 함수가 아님

Vuex Axios 헤더에서 Uncaught TypeError를 반환함: 개체(...)가 Vuex의 함수가 아님

저는 현재 Nuxt를 사용하고 있으며 앱에 axios를 사용하여 중앙 ApiClient를 만들었습니다.

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

사용할 때token()axios 헤더에서 다음 오류가 발생합니다.Uncaught TypeError: Object(...)하지만 xios 인터셉트에서 호출하면 올바른 토큰 유형 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;

매장/매장/매장/매장

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;
  }
};

최신 답변

console.log를 입력하여 store(), store().geters 및 store().geters.get의 값을 디버깅할 수 있습니다.토큰 내부의 토큰은 아래와 같이 기능하며, axiosClient 호출과 인터셉트 호출의 차이 값을 비교합니다.

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

"this returns error: Object(...) is not function from Vuex" 오류 메시지는 토큰이 axiosClient에서 null과 같기 때문입니다.

localStorage.getItem('token')의 초기 상태가 null/undefined이므로 로그인이 완료되기 전에 값이 null이 되기 때문입니다.

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

---

게터즈 오브 Vuex 가이드를 참조하십시오. 게터즈는 다음에 노출됩니다.store.getters값을 속성으로 액세스할 수 있습니다.

토큰 값은 다음을 통해 얻을 수 있습니다.store.getters.getToken대신에store().getters.getToken?

언급URL : https://stackoverflow.com/questions/55323721/vuex-axios-headers-returns-uncaught-typeerror-object-is-not-a-function-fro