v-if с вычисляемым свойством запускается сразу после перезагрузки страницы - PullRequest
Новая
       4

v-if с вычисляемым свойством запускается сразу после перезагрузки страницы

2 голосов
/ 13 марта 2020

После входа в систему мое меню должно измениться на "connexion" на "deconnexion", но этого не происходит.

У меня есть:

LoginPage. vue: 

<fg-input addon-left-icon="now-ui-icons ui-1_email-85"
              v-model="email"
              placeholder="Email">
    </fg-input>

    <fg-input addon-left-icon="now-ui-icons text_caps-small"
              v-model="password"
              placeholder="Mot de passe">
    </fg-input>

    <template slot="raw-content">
        <div class="card-footer text-center">
            <a href="#pablo" class="btn btn-primary btn-round btn-lg btn-block"
               @click.prevent="login">Se connecter</a>


          </div>
         ....
<script>
         ....
       methods: {
            ...mapActions(['loginUser']),
            login(){
            if (this.email.length > 0 && this.password.length > 0) {

                this.loginUser({
                    email: this.email,
                    password: this.password,
                })

            } else {
                this.password = ""

                return alert("Passwords do not match")


              }
....

Магазин. js: 

state:{
        user: {},
        token : "",
        loggedIn: false
    },

    getters:{
        user : state =>{ return state.user },
        token : state =>{ return state.token },
    },

    mutations:{
        SET_USER:(state,newValue)=>{
            return state.user = newValue
        },
        SET_TOKEN:(state,newValue)=>{
            return state.token = newValue
        },
        SET_LOGGEDIN:(state, newValue)=>{
            return state.loggedIn = newValue
        },
    },

    actions:{

        loginUser({commit,state}, payload){

            axios.post("http://127.0.0.1:8000/api/auth/login", payload)
                .then(response => {

                    commit('SET_TOKEN', JSON.stringify(response.data.accessToken))

                    commit('SET_LOGGEDIN', true)

                    router.push({name:'accueil'})

                })
                .catch(error => {
                    console.log(error);
                });
        },

StarterNavbar. vue: 

        <template v-if="loggedIn" >
            <li class="nav-item nav-link" style="cursor: pointer;" @click.prevent="logoutUser">
                Deconnexion
            </li>
        </template>
        <template v-else>
            <router-link class="nav-item nav-link" to="/register">
                Inscription
            </router-link>

            <router-link class="nav-item nav-link" to="/login">
                Connexion
            </router-link>
        </template>
....

    computed:{
        ...mapState(['loggedIn', 'token']),           
    },

После действия входа в систему маршрутизатор pu sh переходит на домашнюю страницу (Accueil. vue). В этом компоненте я отслеживаю свойства 'loggedIn' и 'token' Store. 

 mounted() {
        console.log('token',this.token)         // exist
        console.log('loggedIn', this.loggedIn)  // true

Но я не вижу изменений в моем StarterNavbar: Connexion отображается вместо Deconnexion. Почему мое меню меняется сразу после перезагрузки страницы?

In Vue -devtools после действия входа в систему: 

switch to Components : 
       vuex bindings
          loggedIn: true
          token: ""eyJ0eXAiOiJKV1QiLCJ...""
switch to Vuex: 
       mutation
          payload:true
          type:"SET_LOGGEDIN"

     but STATE is grey, params have old value... and on bottom the following is written:

Состояние записи по запросу ... отображение последнего полученного состояния и кнопки «Состояние нагрузки». Если я нажму на него, состояние станет черным, а параметры получат новые значения. Страница не обновится. Что это значит и что происходит?

...