Не обновляется состояние $auth.loggedIn, так и должно быть?

Question

[WoodsWoods]

Пытаюсь сделать авторизацию в Nuxt.js. Имеется шапка с обычной менюшкой. Если пользователь авторизован, то вывожу его логин, если нет, то вывожу кнопку входа.

При нажатии на кнопку "вход" - открывается модальное окно с формой. Там ввожу логин и пароль, все нормально авторизовывается, но не меняется меню в шапке. Если перезагрузить страницу, то шапка изменяется. Неужели нужно вручную отслеживать это состояние и менять его, или я что-то делаю не так?

Условный код:

<template>
  <div>
    <div v-if="$auth.loggedIn">
      Вы вошли как {{$auth.user.name}}
    </div>
    <div v-else>
      <button v-b-modal>Вход</button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    async userLogin(login, password) {
      try {
        const response = await this.$auth.loginWith('local', { data: { login, password } })
        const user = response.data.user
        this.$auth.setUser(user)
        console.log(this.$auth.loggedIn) //тут будет true
      } catch (err) {
        console.log(err)
      }
    },
  }
}
</script>

Comments

[WoodsWoods]

После авторизации сделал this.$forceUpdate() и стало нормально, но мне кажется это костыль

Answer 1

[WoodsWoods]

В общем я понял. У меня не был подключен vuex. В документации сказано, что vuex будет сам активирован, когда в папке /store будет хотя бы 1 файл. Я создал там файл index.ts и хранилище активировалось. В итоге все заработало.