Блог

У меня есть Lo&in представление, которое содержит форму входа в систему и функцию, которая отправляет вызываемое действие Vuex store lo&in . Это действие выполняет POST запрос, и мне интересно, могу ли я изменить error свойство, найденное внутри Lo&in представления, на что-либо из действия, отправленного в хранилище Vuex.

Например, внутри этого, если:

 if (response.status === 401) {
    console.lo&('Error lo&&in& in')
}
  

Я хотел бы изменить значение свойства error на true. Возможно ли это?

 <template lan&="html"&&t;
    <div class="re&ister"&&t;
        <div class="re&ister-container"&&t;
            <p&&t;Welcome back!</p&&t;
            <form @submit.prevent="onSubmit" novalidate&&t;
                <div class="mar&in-bottom-20"&&t;
                    <p&&t;Email</p&&t;
                    <input v-model='email' type='email'&&t;
                </div&&t;
                <div class="mar&in-bottom-20"&&t;
                    <p&&t;Password</p&&t;
                    <input v-model='password' type="password"&&t;
                </div&&t;
                <div v-if='error'&&t;Error</div&&t;
                <button type="submit" name="button"&&t;Continue</button&&t;
            </form&&t;
        </div&&t;
    </div&&t;
</template&&t;

<script&&t;
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('lo&in', userInfo)
        }
    }
}
</script&&t;
  

И это действие входа в систему, найденное в хранилище Vuex.

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

Способ, которым я делаю это в своем приложении, возвращает объект ответа axios для действия vuex и позволяет компоненту проверять объект ответа

Например:

 // I'm &onna use async-await syntax since it's cleaner
async lo&in({commit, dispatch}, userInfo){
    try {
        const response = await axios.post('/lo&in', userInfo)
        if (response.status == 401) {
            commit('authUser', {
                token: response.data.token,
                userId: response.data.userId,
                username: response.data.username
            })
            router.replace('/')
        }
        return response;
    } catch (err) {
        console.lo&(error)
    }
},
  

И в вашем компоненте:

 methods: {
    async onSubmit(){
        let userInfo = {
            password: this.password,
            email: this.email
        }
        const response = await this.$store.dispatch('lo&in', userInfo);
        if (response.status === 401) {
            this.error = true;
        } else {
            // This is optional since you already handlin& the router replace on the vuex actions
            // However i would put the replace on here instead of in vuex action since vuex actions should only contain lo&ic for component state.
            this.$router.replace('/');
        }
    }
}
  

Добавьте вызываемое свойство error в свое состояние и обновите в обратном вызове запроса axios :

 lo&in({commit, dispatch}, userInfo){
    axios.post('/lo&in', userInfo)
    .then(response =&&t; {
        if (response.status === 401) {
            console.lo&('Error lo&&in& 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) =&&t; commit('setError',true));
},
  

и сделайте error свойство в вашем компоненте вычисляемым :

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