[英]Vue - How to access component's property from 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
});
}
},
视图:
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')
});
},
}
在这里,in.then() 方法我想以某种方式将组件中的测试属性更改为 true。 有人可以帮我解决这个问题吗?
您可以从vuex
操作返回一个Promise
:
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);
});
})
},
}
当你调度 action 时,你可以把它当作一个Promise
(因为返回值是一个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*/);
拥有 Vuex 商店的全部意义不是改变你的组件道具/数据。 相反,您应该将数据存储在 Vuex 中并监听组件中的更改/更新。 因此,在您的登录操作中,您应该具有以下内容:
// Commit the changes to the store
commit('storeTest', true);
然后,在组件中:
computed: {
// Get the value from the store
test: () => {
return this.$store.test;
}
},
Vuex 动作是可以的,所以基本上你在组件中的动作分派应该是这样的:
this.$store.dispatch('login', { username: userObj.username, password: userObj.password }).then(res => {
// response handling
});
此外,您的操作必须返回响应才能使其正常工作。
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');
return resp
})
.catch(e => {
console.log(e);
alert('Something went wrong, try again')
});
},
}
对于突变,您可以使用subscribe或subscribeAction来执行以下操作:
mounted() {
this.$store.subscribeAction({
before: (action, state) => {
switch (action.type) {
case 'login':
this.test = false;
break;
}
},
after: (action, state) => {
switch (action.type) {
case 'login':
this.test = true;
break;
}
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.