无法访问 Axios 拦截器内的 Vuex 存储突变

2024-04-03

EDIT:这个问题非常混乱,所以我基本上用相同的代码示例和相同的场景重写它。


当服务器发送 401 错误响应时,我试图.commit从拦截器到我的 vuex 存储:

import axios from 'axios';
import { store } from '../store/store';

export default function execute() {
    axios.interceptors.request.use(function(config) {
        const token = store.state.token;
        if(token) {
            config.headers.Authorization = `Bearer ${token}`;
            //console.log(config);
            return config;
        } else {
            return config;
        }
    }, function(err) {
        return Promise.reject(err);
    });
    axios.interceptors.response.use((response) => {
        return response;
    }, (err) => {
        console.log(err.response.status);
        if(err.response.status === 401) {
            this.$store.commit('logout');
        }
        console.log('err'); // this doesnt even console log
        return Promise.reject(err);
    });
}

但它抛出错误

类型错误:无法读取未定义的属性“$store”

在评估(httpInterceptor.js?bdcd:22)

我不知道为什么我认为我正确导入了它。

我使用箭头函数,我也尝试过不使用箭头函数,但它会导致与上面相同的错误。

我通过导入拦截器并调用 (import interceptor from './helpers/httpInterceptor.js'; interceptor();)

我的vuex存储文件是:

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        logged: false,
        token: ''
    },
    mutations: {
        login: (state, response) => {
            if(response) {
                state.logged = true;
                state.token = response;
                console.log('state updated');
                console.log('state.logged flag is: '+state.logged);
                console.log('state.token: '+state.token);
            }
        },
        logout: (state) => {
            state.logged = false;
            state.token = '';
        }
    },
    plugins: [
        createPersistedState()
    ]
});

我将它分配给 Vue 实例

new Vue({
    el: '#app',
    router,
    store,
    template: '<app/>',
    components: { app }
});

为什么我不能在这个拦截器中使用我的突变,是什么导致了问题以及如何修复它?


好吧,我修好了。所以我做错的是我遵循文档示例,就像这样this.$store....当你在组件方法中使用它时就很好了。当我像变量一样导入它时

import { store } from '../store/store';

我应该改变

this.$store.commit('logout');

to

store.commit('logout');

现在一切正常。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

无法访问 Axios 拦截器内的 Vuex 存储突变 的相关文章

随机推荐

  • Internet Explorer中跨域POST请求ajax

    我正在使用 jQuery 1 7 2 并且想向另一个域发出 POST 请求 它必须是 POST 请求 但这确实无法在 Internet Explorer 中工作 我在IE9上试过 它适用于所有其他浏览器 我有这个脚本
  • Java中将short转换为byte[]

    我怎样才能转换short 2 个字节 到 Java 中的字节数组 例如 short x 233 byte ret new byte 2 应该是这样的 但不确定 0xFF lt lt 8 x gt gt 0 EDIT 您还可以使用 java
  • 查找我的数据库的 DSN?

    我有一个 SQL 数据库 想要使用 VBA 连接到它以支持一些旧功能 我正在使用 ADODB 连接 需要知道我的数据库 DSN 是什么 我怎样才能找到这个 我正在使用 SQL Server 2008 谢谢 D A DSN 数据源名称 htt
  • Laravel 从嵌套关系中取出一个数组

    我只需要得到roomnumber从以下查询返回的数组 roomnumbers Room with floorroomcount gt function query query gt with roomnumber gt get gt whe
  • java队列中Queue.Poll()返回null但Queue.size()>0

    My code while Memo qRcv size gt 0 MessageReceived msg Memo qRcv poll 然后我得到了 2014 03 01 11 09 36 DEBUG Thread 16 threadQu
  • 如何将时间序列数据中的y%m%d%H格式转换为“%Y%m%d %H:%M:%S”

    我如何转换y m d H格式化为 Y m d H M S 我的日期从 1970 年到 2010 年 部分来自评论 如果您可以相应地修改问题 那就太好了 似乎这不是格式化的情况 y vs Y或空格 分隔符 但是strptime POSIX t
  • C谜题:用有偏差的硬币制造公平的硬币

    如何确定函数在以下情况下返回 0 或 1 的概率 Let the function A返回 0 与 概率 40 和 1 有概率 60 生成一个function B和 概率 50 50 仅使用function A only 我想到了以下几点
  • Java读取文件,如果不存在则创建它

    这是我的代码 public String path public String fileName public static void readData throws IOException try path myPath fileName
  • 具有固定大小的 Blackberry VerticalFieldManager:滚动问题

    我试图拥有一个带有修复标题 带有某些字段的管理器 和可滚动内容 自定义字段列表 的全屏用户界面 这个想法是模拟一种可滚动列表 为此 我制作了一个接受 maxHeight 屏幕高度 标题高度 的自定义 VerticalFieldManager
  • NSPopover 内的 NSTableview 看起来与独立的不同

    我创建了一个ListView类 这是一个非常简单的Tableview 如果我用 IB 实例化它 一切看起来都很好 如果我以编程方式实例化它也是一样 如果我在一个内部以编程方式实例化它NSPopover 我的桌子的每一行都有浅灰色背景 这是从
  • 为什么 form.submit() 不起作用?

    我在页面中有以下片段 我一生都无法弄清楚为什么单击button1元素时表单没有提交 我在 IE 中收到错误消息 指出该对象不支持此属性或方法 我将 document poform 放入警报中 它会警报表单对象 我感觉我可能错过了一些非常明显
  • 某些设备上的 Android 中出现“没有这样的表”问题

    我在 Android 应用程序中使用外部数据库 它在所有模拟器和三星真实设备上运行良好 但是当我检查宏碁智能手机时 我的应用程序崩溃并出现以下异常 android database sqlite SQLiteException no suc
  • 可变结构与类?

    我不确定是否使用可变结构或可变类 我的程序存储一个包含很多对象的数组 我注意到使用类会使所需的内存量增加一倍 但是 我希望对象是可变的 并且有人告诉我使用可变结构是邪恶的 这就是我的类型 struct or class Block publ
  • 将 Flash (AS3) 数据保存为 XML

    我在互联网上 包括 Stack Overflow 花了好几个小时 试图找到一个可靠的 可行的示例 将 Flash 中的信息保存到 XML 文件中 我想获取两种不同类型对象的位置并将每个对象的列表导出到 XML 我们将调用这些对象ball a
  • PHP 5.3.3 中的 ini_set("memory_limit") 根本不起作用

    我之前有过这样的工作 echo ini get memory limit n ini set memory limit 256M echo ini get memory limit n 这将输入 32M 256M 在通过命令行执行的 php
  • 如何在 C# HttpClient 中循环调用分页 URL 以从 JSON 结果下载所有页面

    我的第一个问题 所以请友善 我正在使用C HttpClient调用作业 API 端点 这是端点 Jobs API Endpoint 不需要密钥 点击即可 http service dice com api rest jobsearch v1
  • 如何延迟连接流?

    我正在尝试实现一个在其实现中使用其自身的另一个实例的流 该流前面有一些常量元素 使用 IntStream concat 因此只要串联流惰性地创建非常量部分 这应该就可以工作 我认为使用StreamSupport intStream 重载采用
  • 使用 ThreadPool Python 时的最大池大小

    我正在使用 ThreadPool 来实现多处理 使用多处理时 池大小限制应等于 CPU 核心数 我的问题 使用 ThreadPool 时 池大小限制应该是 CPU 核心数吗 这是我的代码 from multiprocessing pool
  • 外键为空 - 性能下降

    我有一个表文件夹 其中列parent id 引用id 如果该文件夹有父级 如果没有 则parent id 为空 这是好的解决方案还是我需要额外的表来进行此连接或其他解决方案 外键是否可以为空 如果可以 这个解决方案将有更长的执行时间 tab
  • 无法访问 Axios 拦截器内的 Vuex 存储突变

    EDIT 这个问题非常混乱 所以我基本上用相同的代码示例和相同的场景重写它 当服务器发送 401 错误响应时 我试图 commit从拦截器到我的 vuex 存储 import axios from axios import store fr