TypeError:无法读取未定义 store dispatch vuex 的属性“token”
2021-04-17
261
我有一个使用 store Vuex 的 vue 组件。但是我得到了一个
TypeError: Cannot read property 'token' of undefined
错误。我不明白为什么。这是我的代码:
在 main.js 中:
import Vue from 'vue'
import Vuex from 'vuex';
import App from './App.vue'
import router from './router';
import "./assets/css/tailwind.css";
import '@/assets/css/tailwind.css';
import store from './store';
Vue.config.productionTip = false;
Vue.use(Vuex);
new Vue({
router, store,
render: h => h(App),
}).$mount('#app');
在 store/indes.js 中:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
},
state: {
token: ''
}
})
在 GenericForm.vue 中:
methods: {
execute() {
console.log("GenericForm.vue")
if (this.inputFunction) {
this.inputFunction()
}
this.register()
},
register () {
console.log("register()")
try {
const response = AuthenticationService.register({
email: 'testss',
password: 'frgr'
})
this.$store.dispatch('setToken', response.data.token)
this.$store.dispatch('setUser', response.data.user)
this.$store.router.push({
name: 'songs'
})
} catch (error) {
console.log(error)
/*
this.error = error.response.data.error
*/
}
}
}
错误发生在这行代码上:
this.$store.dispatch
任何帮助都是非常感谢。
编辑:
AuthenticationService.js
import api from './api'
export default {
register (credentials) {
return api().post('register', credentials)
}
}
api.js
import axios from 'axios'
export default() => {
return axios.create({
baseURL: 'http://localhost:8081'
})
};
编辑 2 :
新方法:
register: async () => {
console.log("register()")
const response = AuthenticationService.register({
email: 'testss',
password: 'frgr'
}).then((response) => {
console.log(response)
/* this.$store.dispatch('setToken', response.data.token)
this.$store.dispatch('setUser', response.data.user)*/
this.$store.router.push({
name: '/test'
})
});
}
我在
406540024
行上收到错误:
但是,响应还是被记录下来了。
2个回答
存在 两个 问题:
第一个问题 :
此代码:
register(credentials) {
return api().post('register', credentials)
}
返回一个
Promise
,它没有
data
属性。您想要的是访问包装在该承诺中的 axios
response
,因此您可以:
-
在承诺上调用
then
AuthenticationService.register({...}).then((response) => {
console.log(response.data.token) // 'foo'
});
-
在 Vue 组件内使用
async/await
第二个问题
导致存储未定义的问题是使用箭头函数。
register()
方法不应该有箭头。一旦箭头被移除,就不会出现错误(商店已被定义,还有路由器):
async register() {
console.log("register()")
const response = AuthenticationService.register({
email: 'testss',
password: 'frgr'
}).then((response) => {
console.log(response)
console.log(this.$store)
this.$router.push({
name: 'ha'
})
});
}
blackgreen
2021-04-17
这意味着
response
的
data
属性未定义。
AuthenticationService.register
方法是否异步?
我认为是的。如果是,则在
response
对象正确解析之前,您的代码将继续运行。
花点时间运行
console.log(response)
。如果该方法是异步的,您可能会看到未解析的承诺。
否则,如果该方法不返回任何内容而是使用回调,您可能根本看不到任何定义。
Jordan
2021-04-17