dima9595
@dima9595
Junior PHP

Как слушать изменения vuex хранилища и менять определённые данные в компоненте?

Доброго времени суток. Новичок во Vuejs, так что прошу сильно не пинать =)

Есть компонент v-header, в котором есть "переменная", которая должна изменяться при авторизации.
<template>
    <nav class="navbar navbar-expand-lg navbar-light bg-light mb-2">
        <div class="container">
            <router-link :to="{ name: 'index' }" class="navbar-brand">Navbar</router-link>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto mb-2 mb-lg-0" v-for="link in links">
                    <li class="nav-item">
                        <router-link :to="{ name: link.route }" class="nav-link">{{ link.title }}</router-link>
                    </li>
                </ul>

                <ul class="navbar-nav" v-if="!authCheck">
                    <li class="nav-item">
                        <router-link :to="{ name: 'auth.login' }" class="nav-link">Login</router-link>
                    </li>
                    <li class="nav-item">
                        <router-link :to="{ name: 'auth.register' }" class="nav-link">Register</router-link>
                    </li>
                </ul>

                <ul class="navbar-nav" v-else>
                    <li class="nav-item">
                        <router-link :to="{ name: 'auth.login' }" class="nav-link">Профиль</router-link>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</template>

<script>
export default {
    name: "v-header",

    data(){
        return {
            authCheck: false,
            links: [
                {
                    title: 'Index',
                    route: 'index'
                },
            ],
        }
    },

    computed: {
        
    }
}
</script>


Т.е. переменная "authCheck" должна меняться при авторизации на true.

При этом данные об авторизации (авторизован пользователь или нет) находятся во Vuex.
const state = () => ({
    user: {},
    tokens: {
        // ...
    }
})

// getters
const getters = {
    authCheck: state => {
        return ('id' in state.user) ? true : false;
    },

    getUser: state => {
        // ...
    },

    getToken: state => {
        // ...
    }
}

// actions
const actions = {

}

// mutations - изменение состояния
const mutations = {
    saveTokens(state, tokens){
        // ...
    },

    saveUser(state, user){
        state.user = user;
    }
}


Как мне сделать изменение данных (переменной или нескольких) в v-header? Заранее спасибо.
  • Вопрос задан
  • 59 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
В компоненте - переносите authCheck из data в computed, используете mapGetters.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
PLATFORM Тюмень
от 100 000 до 150 000 ₽
ДП-Экспресс Санкт-Петербург
от 130 000 до 200 000 ₽
Astroshock Москва
от 110 000 до 180 000 ₽
23 янв. 2021, в 21:30
20000 руб./за проект
23 янв. 2021, в 20:57
750 руб./в час