How to listen for store vuex changes and change certain data in the component?

Question

Vue.js

Good day. I'm new to Vuejs, so please don't kick too much =)

There is a v-header component, which has a "variable" that should change upon authorization.

<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>

Those. the " authCheck " variable should change to true on authorization .

In this case, the authorization data (whether the user is authorized or not) is in 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;
    }
}

How do I make data change (variable or multiple) in v-header? Thanks in advance.

Answer 1

In a component - move authCheck from data to computed, use mapGetters .