因为重新加载页面会删除 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
                });
            }
        }
    }
});

您也可以使用 Cookie（Cookie 通常更常见于此目的，但 localStorage 也可以正常工作）