Vuex 操作中的 Vue 资源 - "this is null" 错误
Vue resource inside Vuex action - "this is null" error
我正在尝试从存储操作中进行 GET 调用。但是我的 Vue.http.get()
调用抛出 TypeError
"this is null".
我完全不知所措,而且我没有在其他地方找到任何其他人遇到这个具体问题。任何帮助,将不胜感激。谢谢
演练
- 用户导航到 /login/
- 提交登录
- 已通过身份验证并收到令牌
- 调度操作以保存令牌和检索配置文件
- 尝试在 action
中使用 Vue.http
时发生错误
请注意,令牌已正确存储在 state 和 localStorage 中。
Login.vue
methods: {
submit() {
this.$http.post(
this.loginEndpoint,
this.object
).then(response => {
this.$store.dispatch({
"type": "auth/save",
"token": response.body.key,
}).then(() => {
this.$router.push({name: "home"})
}).catch(error => {
console.log(error)
})
}).catch(error => {
console.log(error)
})
}
}
商店
import Vue from 'vue'
import Vuex from 'vuex'
import Auth from '../stores/auth.js'
// plugins
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
auth: Auth,
},
})
auth.js - 存储模块
import Vue from 'vue'
export default {
namespaced: true,
state: {
token: null,
profile: {},
},
mutations: {
setProfile(state, payload) {
state.profile = payload.profile
},
setToken(state, payload) {
state.token = payload.token
},
},
actions: {
save: (context, payload) => {
return new Promise((resolve, reject) => {
const url = "/rest-auth/user/"
context.commit('setToken', {
token: payload.token,
})
localStorage.setItem("token", payload.token)
console.log("get user profile")
// *** Error below calling Vue.http.get ***
// TypeError: this is null
Vue.http.get(url).then(response => {
console.log("Profile received")
context.commit('setProfile', {
profile: response.body,
})
localStorage.setItem("profile", response.body)
resolve()
}).catch(error => {
reject(error)
})
})
},
},
}
堆栈跟踪
TypeError: this is null
Stack trace:
@webpack-internal:///10:42:9
exec@webpack-internal:///6:1150:21
Client/<@webpack-internal:///6:1179:13
PromiseObj@webpack-internal:///6:200:24
Client@webpack-internal:///6:1143:16
Http@webpack-internal:///6:1400:12
Http[method$]@webpack-internal:///6:1431:16
save/<@webpack-internal:///14:112:17
save@webpack-internal:///14:90:20
wrappedActionHandler@webpack-internal:///7:604:15
dispatch@webpack-internal:///7:347:7
boundDispatch@webpack-internal:///7:272:12
submit/<@webpack-internal:///17:100:17
原来是我的 Vue 实例中的代码导致了问题。在那里我将 csrf 值推送到 X-CSRFTOKEN
header.
我正在使用 Django 和 DRF。我刚刚从 SessionAuthentication
切换到使用 TokenAuthentication
,现在了解到不需要传递 csrf 令牌。
下面的代码来自我的main.js
,删除后问题得到解决。
违规代码
/* Add the csrf token to the request header */
Vue.http.interceptors.push(function(request, next) {
let token = this.$cookie.get("csrftoken")
request.headers.set('X-CSRFTOKEN', token)
next()
});
这导致 TypeError
被抛出的确切原因我不能说。
我正在尝试从存储操作中进行 GET 调用。但是我的 Vue.http.get()
调用抛出 TypeError
"this is null".
我完全不知所措,而且我没有在其他地方找到任何其他人遇到这个具体问题。任何帮助,将不胜感激。谢谢
演练
- 用户导航到 /login/
- 提交登录
- 已通过身份验证并收到令牌
- 调度操作以保存令牌和检索配置文件
- 尝试在 action 中使用
Vue.http
时发生错误
请注意,令牌已正确存储在 state 和 localStorage 中。
Login.vue
methods: {
submit() {
this.$http.post(
this.loginEndpoint,
this.object
).then(response => {
this.$store.dispatch({
"type": "auth/save",
"token": response.body.key,
}).then(() => {
this.$router.push({name: "home"})
}).catch(error => {
console.log(error)
})
}).catch(error => {
console.log(error)
})
}
}
商店
import Vue from 'vue'
import Vuex from 'vuex'
import Auth from '../stores/auth.js'
// plugins
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
auth: Auth,
},
})
auth.js - 存储模块
import Vue from 'vue'
export default {
namespaced: true,
state: {
token: null,
profile: {},
},
mutations: {
setProfile(state, payload) {
state.profile = payload.profile
},
setToken(state, payload) {
state.token = payload.token
},
},
actions: {
save: (context, payload) => {
return new Promise((resolve, reject) => {
const url = "/rest-auth/user/"
context.commit('setToken', {
token: payload.token,
})
localStorage.setItem("token", payload.token)
console.log("get user profile")
// *** Error below calling Vue.http.get ***
// TypeError: this is null
Vue.http.get(url).then(response => {
console.log("Profile received")
context.commit('setProfile', {
profile: response.body,
})
localStorage.setItem("profile", response.body)
resolve()
}).catch(error => {
reject(error)
})
})
},
},
}
堆栈跟踪
TypeError: this is null
Stack trace:
@webpack-internal:///10:42:9
exec@webpack-internal:///6:1150:21
Client/<@webpack-internal:///6:1179:13
PromiseObj@webpack-internal:///6:200:24
Client@webpack-internal:///6:1143:16
Http@webpack-internal:///6:1400:12
Http[method$]@webpack-internal:///6:1431:16
save/<@webpack-internal:///14:112:17
save@webpack-internal:///14:90:20
wrappedActionHandler@webpack-internal:///7:604:15
dispatch@webpack-internal:///7:347:7
boundDispatch@webpack-internal:///7:272:12
submit/<@webpack-internal:///17:100:17
原来是我的 Vue 实例中的代码导致了问题。在那里我将 csrf 值推送到 X-CSRFTOKEN
header.
我正在使用 Django 和 DRF。我刚刚从 SessionAuthentication
切换到使用 TokenAuthentication
,现在了解到不需要传递 csrf 令牌。
下面的代码来自我的main.js
,删除后问题得到解决。
违规代码
/* Add the csrf token to the request header */
Vue.http.interceptors.push(function(request, next) {
let token = this.$cookie.get("csrftoken")
request.headers.set('X-CSRFTOKEN', token)
next()
});
这导致 TypeError
被抛出的确切原因我不能说。