Vue watch по-прежнему запускает действие vuex после обновления состояния vuex

Question

Привет, ребята, у меня проблемы с моим небольшим проектом, поэтому в основном мне просто нужно показать пользователю модальность регистрации, если они не вошли в систему, когда они щелкают по любому элементу на моей странице.Проблема заключается в том, что после того, как они вошли в систему, модал по-прежнему показывает, когда они щелкают что-то, чего не должно быть после того, как уже вошли в систему.

Вот мои коды

RegistrationModal.vue

axios.get('/user/sign-up', {
        params:{
            name: this.name,
            email: this.email,
            password: this.password,
            phone: this.phone,
            age: this.age,
            city: this.city,
        }
    })
    .then( (response) => {
        if( response.status == 200 ) {
            $('#modals-signup').modal('hide')
            this.$store.commit( 'UPDATE_USER_LOGIN_STATE' )
        }
    });

HomePage.vue

    import { mapState } from 'vuex'

export default {
    data: function() {
        return {
            loginState: this.$store.state.isLoggedIn
        }
    },
    computed: {
        ...mapState([
            'isLoggedIn'
        ]),
    },
    watch: {
        isLoggedIn( newVal, oldVal ) {
            this.loginState = newVal
            console.log('HOME PAGE WATCH ==================' + newVal + ' ===== ' +this.loginState)

            if ( this.loginState ) {
                console.log('true since its logged in')
                return 
            }
            else {
                console.log('false since its logged out')
                this.$store.dispatch('preventClickingItems')
            }
        }
    }
}

Store.js

    const state = {
    isLoggedIn: false,
}

const getters = {
    isLoggedIn: (state) => state.isLoggedIn
}

const actions = {
    preventClickingItems: ( {commit} ) => {
        $('section').on('click', 'div.container *', (e) => {
            $('#modals-signup').modal('show')
            e.preventDefault()
            e.stopPropagation()
            return false
        })
    }
}

const mutations = {
    UPDATE_USER_LOGIN_STATE( state ) {
        state.isLoggedIn = !state.isLoggedIn
        console.log('===========', state.isLoggedIn)
    }
}


export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
    plugins: [vuexCookie.plugin]
})

Мне удалось обновить состояние после входа в систему и выполнить блок if только изчасы, но я не понимаю, почему он по-прежнему вызывает модальный режим, поскольку он запускает только блок if.

Answer 1

Я решил эту проблему, добавив оператор if в событие click для проверки значения состояния isLoggedIn

const actions = {
    preventClickingItems: ( {commit, state} ) => {
        $('section').on('click', 'div.container *', (e) => {
            if ( state.isLoggedIn ) {
                return
            }
            else {
                $('#modals-signup').modal('show')
                e.preventDefault()
                e.stopPropagation()
                return false
            }
        })
    }
}