TypeError:无法读取未定义商店调度 vuex 的属性“令牌”
Posted
技术标签:
【中文标题】TypeError:无法读取未定义商店调度 vuex 的属性“令牌”【英文标题】:TypeError: Cannot read property 'token' of undefined store dispatch vuex 【发布时间】:2021-07-12 11:19:11 【问题描述】:我有一个使用商店 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');
在商店/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'
)
;
添加console.log
后:
EDIT2:
新方法:
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'
)
);
我得到了错误
this.$store.router.push(
name: '/test'
)
行:
不过,响应会被记录下来。
【问题讨论】:
【参考方案1】:有两个问题:
第一个问题:
这段代码:
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'
)
);
【讨论】:
【参考方案2】:这意味着response
的data
属性未定义。
AuthenticationService.register
方法是异步的吗?
我想是的。如果是这样,您的代码将在正确解析 response
对象之前继续运行。
花点时间运行console.log(response)
。如果方法是异步的,您可能会看到未解决的承诺。
否则,如果该方法不返回任何内容而是使用回调,则您可能根本看不到任何定义。
【讨论】:
好吧,就像我在回答中所说的那样,您需要等待承诺 :) 您可以使用 async/await 语法。 developer.mozilla.org/en-US/docs/Learn/javascript/Asynchronous/…以上是关于TypeError:无法读取未定义商店调度 vuex 的属性“令牌”的主要内容,如果未能解决你的问题,请参考以下文章
Vue:未捕获(承诺中)TypeError:无法读取未定义的属性'_c'
[Vue 警告]:渲染错误:“TypeError:无法读取未定义的属性 'NomeStr'”
TypeError:无法读取 Vue 中未定义的属性“id”
Vue 3 + Vue Router 4:TypeError:无法读取未定义的属性(读取“推送”)