Доброго времени суток. Новичок во 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? Заранее спасибо.
Средний