如何使用localStorage結(jié)合Vuex來(lái)保存用戶登錄信息？

我現(xiàn)在有一個(gè) headerBar 組件，上面顯示了用戶名稱（如果設(shè)置了昵稱顯示昵稱，否則顯示用戶名稱），當(dāng)用戶點(diǎn)擊登錄按鈕時(shí)，調(diào)用api獲取用戶信息，保存到Vuex的state里面，headerBar通過(guò)this.$store.getters.xxx來(lái)獲取用戶登錄信息，但是當(dāng)用戶刷新時(shí)，state里面的用戶信息全沒了，所以我考慮加入 localStorage 來(lái)保存用戶信息，但是這部分代碼不知道該如何“分布”，因?yàn)橐紤]用戶登錄超時(shí)，請(qǐng)小伙伴們指點(diǎn)指點(diǎn)，謝謝！

代碼如下：

export default new Vuex.Store({
    state: {
        loginInfo: null,//當(dāng)前用戶簡(jiǎn)要信息
    },
    getters: {
        GET_LOGININFO(state) {
            //先從state里面獲取用戶登錄信息
            let loginInfo = state.loginInfo;
            //如果 state 里面獲取不到，那么從localStorage里面獲取
            if(!loginInfo){
                loginInfo = JSON.parse(window.localStorage.getItem('loginInfo') || null)
            }
            return loginInfo;
        },
    },
    mutations: {
        SET_LOGININFO(state, data){
            state.userInfo = data.data;
        }
    },
    actions: {
        Login(context, data) {
            axios.post('/api/login', {
                userName: 'admin',
                pwd: '123456'
            })
            .then((res) => {
                //登錄成功，保存當(dāng)前用戶信息到 state 里面，以便其他組建獲取
                context.commit('SET_LOGININFO', res.data);
                //保存到localStorage里面
                window.localStorage.setItem('loginInfo', JSON.stringify(items));
                return res;                
            })
            .catch(function (error) {});
        },
    }
})

想請(qǐng)教幾個(gè)問(wèn)題：
1、這么使用 localStorage 正確么？或者合理么？有沒有更好的方法呢？
2、在getters下面的GET_LOGININFO方法里面，如果進(jìn)入了if(!loginInfo)語(yǔ)句，該方法是否可以為 state 屬性loginInfo賦值呢（或者調(diào)用mutations方法來(lái)給loginInfo賦值）？
3、這樣的話，如果用戶點(diǎn)擊退出按鈕，是不是意味著需要清空state的loginInfo，還需要清除localStorage下面的loginInfo呢？
4、這樣的話，從客戶端角度來(lái)看，是不是客戶就永遠(yuǎn)保持以登錄狀態(tài)了？這個(gè)環(huán)節(jié)該怎么做好呢？

補(bǔ)充：第二個(gè)問(wèn)題其實(shí)就是：getters里面的方法是否可以為state屬性賦值（直接訪問(wèn)state屬性賦值 或者 調(diào)用mutations方法賦值）？