потому что перезагрузка страницы удаляет данные vuex, использовав мутации, vuejs?

Question

В настоящее время у меня есть следующая конфигурация в моем vuex, которую я делаю с помощью действия userAuth, проверяющего роль пользователя и присваивающего его свойству состояния 'rol_user', используя мутацию UPDATEROL. Я выполняю это действие при входе в систему, чтобы роль пользователя была записана в vuex.

здесь конфигурация vuex:

import Vue from "vue";
import Vuex from "vuex";
import firebase from 'firebase';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        rol_user: ''
    },
    mutations: {
        UPDATEROL: function (state, payload) {
            state.rol_user = payload.rol_user;
        }
    },
    actions: {
        userAuth: async (context) =>{
            let user = firebase.auth().currentUser;
            if(user){
                let user_info = await firebase.database().ref('users').child(user.uid).once('value');
                let val_user = user_info.val();
                console.log("USER AUTH - VUEX");
                console.log(val_user.rol);
                context.commit('UPDATEROL',{
                    rol_user: val_user.rol
                });
            }
        }
    }
});

Она эффективно назначает роль пользователя свойству state rol_user. У меня проблема при перезагрузке страницы. Когда я перезагружаю страницу rol_user возвращается в исходное состояние, она пуста. Как я могу сделать так, чтобы значение роли не терялось даже при перезагрузке страницы, а вместо этого менялось только на пустое, пока я не выйду из системы

Answer 1

Вам нужно использовать какой-то механизм хранения и проверять его каждый раз, когда приложение монтируется. Например, вы можете сохранить ключ сеанса в localStorage или просто сохранить пользовательское состояние, которое вы хотите сохранить.

Примечание. Я не знаю, какие данные вы храните, я полагаю rol_user это объект, если это строка, вам не нужно JSON сериализация / десериализация, как я делал в приведенном ниже примере:

import Vue from "vue";
import Vuex from "vuex";
import firebase from 'firebase';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        rol_user: ''
    },
    mutations: {
        UPDATEROL: function (state, payload) {
            state.rol_user = payload.rol_user;
            localStorage && (localStorage.rol_user = JSON.stringify(state.rol_user)); 
               //^ try to store the user role in localStorage
        },

    },
    actions: {
        userAuth: async (context) =>{
            if(localStorage && localStorage.rol_user) { 
               //^ if it's in localStorage, log the user back in/update state to match what it is in localStorage
                 context.commit('UPDATEROL', { rol_user: JSON.parse(localStorage.rol_user)});
                 return;
            }
            let user = firebase.auth().currentUser;
            if(user){
                let user_info = await firebase.database().ref('users').child(user.uid).once('value');
                let val_user = user_info.val();
                console.log("USER AUTH - VUEX");
                console.log(val_user.rol);
                context.commit('UPDATEROL',{
                    rol_user: val_user.rol
                });
            }
        }
    }
});

Вы также можете использовать куки (куки обычно больше общий для этой цели, но localStorage тоже отлично работает)