Как убрать скачки стейта в vue приложении?

Question

[E-em]

Всем привет :)

экшн

checkAuthStatus ({ commit }) {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        commit('checkAuthStatus', {
          status: true,
          user
        })
      } else {
        commit('checkAuthStatus', {status: false})
      }
    })
  }

и мутейшн

checkAuthStatus (state, data) {
    state.user.name = data.user.displayName
    state.user.email = data.user.email
    state.authenticated = data.status
  }

при mounted диспатчу экшн в компоненте и делаю проверку authenticated, если залогинен то убираю кнопку входа и засовываю туда имя юзера, но при рефреше страницы проскакивает кнопка входа, как это убрать?

Answer 1

[wearemieta]

1. Компонент срендерился
2. Экшн отправил данные к API Firebase.
3. ...............
4. Залогинен!

Вы не учли, что в пункте 3 данные ходят по сети не нулевое время. Они ходят, а вы видите кнопку.
Добавьте проверку state в компоненте и не показывайте кнопку пока там не будет данных.

<template v-if="authenticated">
   <кнопка />
</template>
export default {
   computed: {
      authenticated: return this.$store.getters.authenticated
   }
}

Как-то так. Можно еще спиннер какой-нибудь показывать в <template v-else>

Comments

[E-em]

у меня header отдельный компонент, если добавить на template весь if то он исчезает при рефреше, делать ещё и на родителя как-то костыльно по моему, или нормально? я просто в этом только начал разбираться и сейчас путаница, как вообще делают аутентификацию топовые бородатые тыжпрограммисты?

[E-em]

И почему authenticated в getters? у меня он определяется после экшена, потом мутация передает в стейт, и уже потом через mapState вывожу во вьюху статус и юзер дату

[wearemieta]

E-em:

если добавить на template весь if то он исчезает при рефреше,

Так, а не надо делать на весь. Можно внутри template сделать template с v-if.

<template>
<div class="wrapper">
 <template v-if="authenticated">
    <кнопка />
 </template>
</div> 
</template>

[E-em]

wearemieta: а в чём разница между навешиванием if'ов на простые ссылки? оно всё равно проскакивает.
Сделал геттер такой

export default {
  isAuthenticated (state) {
    return state.authenticated
  }
}

компонент

<p class="header-user" v-if="authenticated">{{ name }}</p>
 <router-link to="/login" class="default-btn" v-else>Войти</router-link>

потом через mapgetters вылавливаю статус

[wearemieta]

E-em:

И почему authenticated в getters? у меня он определяется после экшена, потом мутация передает в стейт, и уже потом через mapState вывожу во вьюху статус и юзер дату

Пожалуйста, если это работает, можно брать напрямую из state. Но если вдруг потом захочется чуток переписать, то придется искать обращения к state во всем коде. В случае геттера, переписать можно только один геттер. Vue Getters

[wearemieta]

E-em: кажется, вы не понимаете о чем речь. Выложите в gist код компонента с которым у вас проблема и код store. Ну и ссылки запостите сюда.

[E-em]

wearemieta:
нашёл точь в точь проблему как у меня https://stackoverflow.com/questions/43027499/vuex-...
но хотелось бы без плагинов обойтись, буду пробоватью
А код как бы выше есть в главном вопросе, стор вот

const userModule = {
  state: {
    authenticated: false,
    authError: '',
    user: {
      email: '',
      name: ''
    }
  },
  actions,
  mutations
}

[wearemieta]

@E-em

Сделал геттер такой
export default {
isAuthenticated (state) {
return state.authenticated
}
}

Этот код где находится? Внутри компонента? Какой это тогда Vuex геттер? Я уже скидывал ссылку на документацию геттеров выше.

а в чём разница между навешиванием if'ов на простые ссылки? оно всё равно проскакивает.
{{ name }}
Войти

Здесь ваш if проверяет authenticated и показывает {{ name }} если true. Само собой это будет проскакивать, потому что вы не делаете то, что я показал в примере.

<template v-if="authenticated">
    <кнопка />
 </template>

Что происходит в этом коде? Мы проверяем authenticated и если true рендерим кнопку.

Conditional Rendering

[wearemieta]

E-em в этой системе комментирования абсолютно невозможно вести диалог. Если вы желаете продолжить обсуждение вашей проблемы, я предлагаю перейти в мессенджер. Можно здесь: https://tlk.io/vue. Либо, выложите ваш код в репозиторий, чтобы я мог на вашем же примере показать как это работает.

[E-em]

wearemieta: мне надо кнопку наоборот скрывать если пользователь залогинен, геттер просто отдельный файл который импортится в модуль, код которого я скинул выше в комментах

[wearemieta]

E-em:

мне надо кнопку наоборот скрывать если пользователь залогинен, геттер просто отдельный файл который импортится в модуль, код которого я скинул выше в комментах

Это абсолютно неважно. Я приложил максимум усилий. Я не смогу помочь, если не увижу кода.

[E-em]

wearemieta: можно ваш gmail или то куда могу скинуть ссылку на репо?

Answer 2

[Evgeny Kulakov]

Варианты:

1. authenticated сделать null по умолчанию, v-if="authenticated !== null" на блок, который отвечает за отображение кнопки логина или ссылки на пользователя.

2. Спиннер, пока данные не получены.