javascript - 是否可以在 axios 拦截器中访问 vue 实例?
问题描述
我正在使用 vue-reactive-storage 因为 localStorage 不是反应式的。使用这个插件会创建一个可供所有组件访问的 vue 对象。我想在我的 axios 拦截器响应函数中访问这个对象,但我得到了 common TypeError: Cannot read property 'localStorage' of undefined
。
应用程序.js:
require('./bootstrap');
import Vue from 'vue';
import Vuetify from 'vuetify';
import reactiveStorage from "vue-reactive-storage";
import store from './store/index';
Vue.use(Vuetify);
Vue.use(reactiveStorage, {
"snackBar": {show: false, text: '(Initial snackbar text.)', type: 'info', timedelay: 2000},
});
axios.interceptors.response.use(response => response, error => {
this.localStorage.snackBar.text = error.response.data.message || 'Request error status: ' + error.response.status,
this.localStorage.snackBar.type = 'error'
this.localStorage.snackBar.show = 'true'
})
import router from './routes';
const app = new Vue({
el: '#app',
vuetify: new Vuetify(),
router,
store,
}
});
这可能吗?
Laravel v6.4.1,Vue v2.6.10
解决方案
这是可能的,并在此处进行了说明。
TL;DR:使用老式函数定义并将其设置为原型,让此函数获得您的 Vue 实例的上下文绑定。
推荐阅读
- c++ - 如何确定 cv::Mat 是否有任何零值?
- android - 为什么Android允许未经许可读取文件?
- python - 如何在 XML 中获取特定根的数据(通过 python)
- cookies - 为什么 Chrome API 在 Firefox 中不起作用?
- reactjs - Webpack 工作箱插件 3.0 - 缓存附加文件(非 webpack 资产)
- javascript - 通过 Bot 框架中的后端通道发送位置详细信息
- android - 列别名引发错误:没有这样的列
- java - 当 url 包含分号时,在 Spring 5 中获得 500 响应
- postgresql - 如何遍历表并使用列属性在 postGIS 中创建一条线
- javascript - 通过包含函数的数组反向循环,没有jQuery