时间戳

首页 > 解决方案 > Vuex Axios 标头返回 Uncaught TypeError: Object(...) is not a function from Vuex

vue.js - Vuex Axios 标头返回 Uncaught TypeError: Object(...) is not a function from Vuex

问题描述

我目前正在使用 Nuxt，并使用 axios 在我的应用程序中创建了一个中央 ApiClient。

服务/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()in axios 标头时，我得到了错误： Uncaught TypeError: Object(...)但是当我从 axios 拦截器调用它时，我得到了正确的令牌类型字符串。

存储/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;

存储/模块/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;
  }
};

标签： vue.jsvuex

解决方案

最新答案

可能您可以将console.log 用于调试token 函数中的store()、store().getters 和store().getters.getToken 的值，如下所示，并比较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 a function from Vuex”的错误信息是因为 axiosClient 中的 token 等于null。

这是因为 localStorage.getItem('token') 的初始状态为空/未定义，因此在登录完成之前其值变为空。

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

参考Vuex 的 Getter 指南，getter 将暴露在store.getters对象上，并且您可以将值作为属性访问。

可能你可以通过store.getters.getToken而不是获得令牌值store().getters.getToken？

推荐阅读