Почему не сохраняется состояние state после перезагрузки страницы и есть ли иные варианты?

Question

[Дмитрий Кузнецов]

Продолжаю разработку сайта на vuejs. Ранее использовал localstorage для хранения некоторых данных (данные о пользователе, состояние аутентификации и прочее), а теперь решил перейти на vuex. Немного изучив документацию решил написать небольшой функционал для авторизации.

По идеи, после авторизации пользователя, данные о том, что пользователь авторизован, мы записываем в "state" - true. Изменение в vuex работает, т.е. в отладочной консоли это значение отображается нормально - true. Но после перезагрузки страницы это значение исчезает - становится false.

У меня 2 предположения:
1. Я что-то делаю не так
2. Я не хорошо ознакомился с Vuex, и не разобравшись в сути технологии начал делать на нём. Т.е. vuex хранит данные только без обновления страниц.

Vuex - Auth.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const Auth = new Vuex.Store({
    state: {
        isAuth: false
    },

    mutations: {
        authentificatedState(state) {
            state.isAuth = true
        },

        // logout() {
        //     state.isAuth = false
        // }
    }
})

export default Auth

В необходимых vue-файлах вызываю this.$store.Auth.state.isAuth.

Подскажите пожалуйста, что я не так делаю, и по возможности объясните как лучше это делать.

Answer 1

[0xD34F]

У меня 2 предположения:
1. Я что-то делаю не так
2. Я не хорошо ознакомился с Vuex...

Всё так. Вы сами себе попробуйте ответить на вопрос - а ГДЕ будет хранится стэйт после того, как вы покинете страницу?

Хотите сохранять данные между перезагрузками - для vuex под это дело есть плагины, такие как vuex-persistedstate, например.

Comments

[Дмитрий Кузнецов]

Тогда как лучше хранить, допустим, данные пользователя (id, login, email etc)?
PS: Frontend (vuejs) и Backend (Laravel 5) разделены, находятся на разных доменов.

[0xD34F]

Дмитрий Кузнецов, localStorage или cookie, ну и плагин для vuex, который максимально их от вас скроет.

[Дмитрий Кузнецов]

0xD34F, благодарю. Как я ранее писал, раньше использовал localstorage для хранения таких данных. Как вы и сами знаете - это не безопасно. Вот и думал, что vuex данную проблему решит. А тут как оказалось не всё так просто.

[Дмитрий Кузнецов]

0xD34F,

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

Вы же про vuex-persistedstate?

[0xD34F]

Дмитрий Кузнецов, да. Ну или про какой другой - можно поискать, они есть.

[Дмитрий Кузнецов]

0xD34F, Ещё раз спасибо!)