vue 中使用vuex和localStorage保存登錄狀態

需求：

　　在寫vue時，將用戶信息保存在vuex中，但是F5刷新之后，用戶信息沒有了，需要重新登陸。每次都重新登陸會導致用戶體驗不好。

原理：

　　vuex中的數據在頁面刷新之后其中的數據會初始化，這就導致組件之間通過vuex傳遞的數據在用戶F5刷新頁面之后會丟失

 

解決辦法：使用vuex和localStorage保存登錄狀態

話不多說，上代碼！！！

vuex中：

const state = {
        //先去localStorage中獲取數據
    userInfo: JSON.parse(localStorage.getItem("userInfo")) || {},
}
const mutations = {
    setuserInfo(state, v) {
               //將傳遞的數據先保存到localStorage中
        localStorage.setItem('userInfo', JSON.stringify(v));
              // 之后才是修改state中的狀態
        state.userInfo = v;
    },
}
                        

組件中邏輯：在登錄成功之后提交mutations，更改用戶信息

    if(res.data.code === 0){
        this.user = res.data.data
        this.$store.commit("setuserInfo", this.user);
        this.$Message['success']({
                    background: true,
                    content: '登陸成功，即將跳轉...'
        });
        this.$router.push('/chat')
    }

組件中邏輯：退出也要更新信息（注意不要寫成null,要寫成''）

this.$store.commit('setuserInfo','');//更新userInfo