Javascript 如何通过Vuex存储操作更改组件中属性的值？

我有一个

Login

视图，其中包含一个登录表单和一个函数，该函数用于调度名为

Login

的Vuex存储操作。此操作发出一个

POST

请求，我想知道是否可以将

登录

视图中的

错误

属性更改为Vuex存储中调度的操作中的内容

login({commit, dispatch}, userInfo){
    axios.post('/login', userInfo)
    .then(response => {
        if (response.status === 401) {
            console.log('Error logging in')
        } else {
            commit('authUser', {
                token: response.data.token,
                userId: response.data.userId,
                username: response.data.username
            })
            router.replace('/')
        }
    }).catch((error) => console.log(error));
},

例如，如果：

if (response.status === 401) {
    console.log('Error logging in')
}

我想将error属性的值更改为true。可能吗

<template lang="html">
    <div class="register">
        <div class="register-container">
            <p>Welcome back!</p>
            <form @submit.prevent="onSubmit" novalidate>
                <div class="margin-bottom-20">
                    <p>Email</p>
                    <input v-model='email' type='email'>
                </div>
                <div class="margin-bottom-20">
                    <p>Password</p>
                    <input v-model='password' type="password">
                </div>
                <div v-if='error'>Error</div>
                <button type="submit" name="button">Continue</button>
            </form>
        </div>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data(){
        return {
            email: '',
            password: '',
            error: false
        }
    },
    methods: {
        onSubmit(){
            let userInfo = {
                password: this.password,
                email: this.email
            }
            this.$store.dispatch('login', userInfo)
        }
    }
}
</script>

---

我在应用程序中执行此操作的方式是在vuex操作上返回axios响应对象，并让组件检查响应对象

例如：

//我将使用异步等待语法，因为它更干净
异步登录（{commit，dispatch}，userInfo）{
试一试{
const response=wait axios.post（'/login'，userInfo）
如果（response.status==401）{
提交（'authUser'{
令牌：response.data.token，
userId:response.data.userId，
用户名：response.data.username
})
路由器。替换（“/”）
}
返回响应；
}捕捉（错误）{
console.log（错误）
}
},

在您的组件上：

方法：{
异步onSubmit（）{
让用户信息={
密码：this.password，
电子邮件：this.email
}
const response=wait this.$store.dispatch（'login'，userInfo）；
如果（response.status==401）{
this.error=true；
}否则{
//这是可选的，因为您已经在vuex操作上处理路由器替换
//但是，我会将替换放在这里，而不是放在vuex操作中，因为vuex操作应该只包含组件状态的逻辑。
此.$router.replace（'/'）；
}
}
}

我在应用程序中的做法是在vuex操作中返回axios响应对象，并让组件检查响应对象

例如：

//我将使用异步等待语法，因为它更干净
异步登录（{commit，dispatch}，userInfo）{
试一试{
const response=wait axios.post（'/login'，userInfo）
如果（response.status==401）{
提交（'authUser'{
令牌：response.data.token，
userId:response.data.userId，
用户名：response.data.username
})
路由器。替换（“/”）
}
返回响应；
}捕捉（错误）{
console.log（错误）
}
},

在您的组件上：

方法：{
异步onSubmit（）{
让用户信息={
密码：this.password，
电子邮件：this.email
}
const response=wait this.$store.dispatch（'login'，userInfo）；
如果（response.status==401）{
this.error=true；
}否则{
//这是可选的，因为您已经在vuex操作上处理路由器替换
//但是，我会将替换放在这里，而不是放在vuex操作中，因为vuex操作应该只包含组件状态的逻辑。
此.$router.replace（'/'）；
}
}
}

将名为

error

的属性添加到您的状态，并在axios请求回调中更新：

login({commit, dispatch}, userInfo){
    axios.post('/login', userInfo)
    .then(response => {
        if (response.status === 401) {
            console.log('Error logging in');
            commit('setError',true);
        } else {
            commit('authUser', {
                token: response.data.token,
                userId: response.data.userId,
                username: response.data.username
            })
         commit('setError',false);
            router.replace('/')
        }
    }).catch((error) => commit('setError',true));
},

并将组件中的

error

属性作为计算属性：

   data(){
        return {
            email: '',
            password: '',
          
        }
    },
  computed:{
      error(){
        return this.$store.state.error;
        }
   }

---

将名为

error

的属性添加到您的状态并在axios请求回调中更新：

login({commit, dispatch}, userInfo){
    axios.post('/login', userInfo)
    .then(response => {
        if (response.status === 401) {
            console.log('Error logging in');
            commit('setError',true);
        } else {
            commit('authUser', {
                token: response.data.token,
                userId: response.data.userId,
                username: response.data.username
            })
         commit('setError',false);
            router.replace('/')
        }
    }).catch((error) => commit('setError',true));
},

并将组件中的

error

属性作为计算属性：

   data(){
        return {
            email: '',
            password: '',
          
        }
    },
  computed:{
      error(){
        return this.$store.state.error;
        }
   }

---

我喜欢你做这件事的方式。出于好奇，您是否希望在try-catch中捕获任何特定的错误，或者try-catch是异步/等待的.catch（error）等价物？从技术上讲，它将捕获try块中的任何错误，因为我使用的是异步等待语法，所以它不仅仅是

.catch（error）

，但是，如果调用

router.replace（）

时出错，我喜欢您的做法。出于好奇，您是否希望在try-catch中捕获任何特定的错误，或者try-catch是异步/等待的.catch（error）等价物？从技术上讲，它将捕获try块中的任何错误，因为我使用的是异步等待语法，所以它不仅仅是

.catch（error）

，但是，如果调用

router.replace（）时出错，也可以使用