javascript - Vue - 如何从 Vuex 访问组件的属性
问题描述
在我的应用程序中,我使用 Vuex 来执行异步任务。在这种情况下,我使用它将用户登录到我的应用程序。当用户登录并且 axios.then() 正在执行时,我想通知我调用 this.$store.dispatch('login', {username: userObj.username, password: userObj.password}); 的组件 我的组件:
data() {
test: false
},
methods: {
login() {
const userObj = {
username: this.username,
password: this.password
};
console.log(userObj);
this.$store.dispatch('login',
{
username: userObj.username, password: userObj.password
});
}
},
Vuex:
const actions = {
login({ commit }, authData) {
axios.post('/login', {
username: authData.username,
password: authData.password
})
.then(resp => {
console.log(resp);
localStorage.setItem('token', resp.data.authToken);
localStorage.setItem('userId', resp.data.id);
localStorage.setItem('user', resp.data);
commit('storeUser', resp.data);
router.replace('/dashboard');
})
.catch(e => {
console.log(e);
alert('Something went wrong, try again')
});
},
}
在这里,在 .then() 方法中,我想以某种方式将组件中的测试属性更改为 true。有人可以帮我解决这个问题吗?
解决方案
Promise
你可以从一个vuex
动作中返回一个:
const actions = {
login({ commit }, authData) {
return new Promise((resolve, reject) => {
axios.post('/login', {
username: authData.username,
password: authData.password
})
.then(resp => {
console.log(resp);
localStorage.setItem('token', resp.data.authToken);
localStorage.setItem('userId', resp.data.id);
localStorage.setItem('user', resp.data);
commit('storeUser', resp.data);
router.replace('/dashboard');
resolve(resp);
})
.catch(e => {
console.log(e);
alert('Something went wrong, try again')
reject(e);
});
})
},
}
当您调度操作时,您可以将其视为 a Promise
(因为返回值是 a Promise
):
// inside your component
this.
$store.
dispatch('login', {username: userObj.username, password: userObj.password})
.then(resp => { /* do something with axios response using component data and methods*/);
推荐阅读
- objective-c - UIPrinterCutterBehavior 委托方法从未被调用
- azure - .net Core 上的 Microsoft.ProjectOxford.SpeechRecognition-x64
- python - Kubernetes 上的 Dask 工作人员找不到 csv 文件
- tomcat - 如何强制 Logback 将 jar 中的日志记录配置用于此 jar 中定义的类?
- oauth - Microsoft 声明 TenantId 已删除、更改或不可用
- python - Python + Selenium:等待网络元素消失
- c - C - scanf() 接受两个输入而不是一个
- filter - 如何在 Power BI 中按度量筛选结果
- solr - 有使用Lucene创建的索引,需要从Solr查询
- python - last() 和 [] 运算符给出不同的结果