利用localstorage解决vuex页面刷新数据丢失问题

一、场景描述：

根据用户的登录状态来实现不同的路由跳转，这个功能之前有写到用三目运算来实现。那么这个用户状态又怎么做呢，怎么在登录期间刷新页面而不丢失用户信息？首先想到Vuex作为全局的共享数据。但是在页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被重新赋值。

---

二、解决思路：

将用户信息更新至vuex中并保存到local storage，这样页面刷新或者其他页面都可以读取到用户信息。

具体实现：

1 记录用户信息到local storage

• 1.登录状态所有页面都需要用到这个变量，所有采用vuex插件

// store/index.js
   const state = {
	userInfo: null, //用户信息
	login: true,//是否登录
        }

• 2.login.vue 登录页面

   data(){
      return {
            userInfo: null, //获取到的用户信息
            }
         }

输入密码用户名信息调用后台接口，用userInfo接收返回信息

 this.userInfo = await sendLogin(this.mobileCode, this.phoneNumber, this.validate_token);
 console.log('登录', this.userInfo)

将用户状态userInfo保存到vuex中

        methods: {
            ...mapMutations([
                'RECORD_USERINFO',
            ])
        }

Mutation 用于变更 Store中的userInfo数据

this.RECORD_USERINFO(this.userInfo);

• 3.store/mutation.js

import { setStore } from '../config/mUtils'
 Mutation 用于变更 Store中 的数据。
    // 记录用户信息
    [RECORD_USERINFO](state, info) {
        state.userInfo = info;
        state.login = true;
        setStore('user_id', info.user_id);
    },

• 4 config/mUtils

localStorage 数据不受页面刷新影响，也不会关闭窗口、标签页或重启浏览器而丢失，如果只将用户信息保存到vuex中，那么刷新页面的时候数据就会丢失

/**
 * 存储localStorage
 */
export const setStore = (name, content) => {
    if (!name) return;
    if (typeof content !== 'string') {
        content = JSON.stringify(content);
    }
    window.localStorage.setItem(name, content);
}

2.2 从local storage读取信息存入到vuex

• 1.head.vue

        <router-link :to="userInfo? '/profile':'/login'">
            <svg class="user_avatar" v-if="userInfo"></svg>
            <span class="login_span" v-else>登录|注册</span>
        </router-link>

    import {mapState,mapActions} from 'vuex'
    export default {
        mounted() {
            //获取用户信息
            this.getUserInfo();

        },
        computed: {
            ...mapState([
                'userInfo'
            ]),
        },
        methods: {
            ...mapActions([
                'getUserInfo'
            ]),
        },

    }

• 2 action.js

actions是用来封装一些异步行为或延时任务的结果操作来更新状态的。

import {getUser,getAddressList} from '../service/getData'
import {GET_USERINFO,SAVE_ADDRESS} from './mutation-types.js'
export default {
    async getUserInfo({ commit, state }) {
        let res = await getUser();
        console.log('userinfo', res); 
        commit(GET_USERINFO, res)
    },

没有登录时，打印信息如下：
status: 0, type: “GET_USER_INFO_FAIELD”, message: “通过session获取用户信息失败”
登录状态，打印如下：

• 3 getData.js

export const getUser = () => fetch('/v1/user', { user_id: getStore('user_id') });

• 4 config/mUtils

通过local Storage对象的方法取得用户数据

/**
 * 获取localStorage
 */
export const getStore = name => {
    if (!name) return;
    return window.localStorage.getItem(name);
}

• 5 mutation.js

    //获取用户信息存入vuex
    [GET_USERINFO](state, info) {
        if (state.userInfo && (state.userInfo.username !== info.username)) {
            return;
        };
        if (!state.login) {
            return
        }
        if (!info.message) {
            state.userInfo = {...info };
        } else {
            state.userInfo = null;
        }
    },

---

三 、实现：

user_id：64276存储到ocal storage中

登录状态时跳转到profile,并且此时刷新都可以读取到用户信息不会变为默认值！

---

四、小结

• 选择合适的浏览器存储

  localStorage – 是永久存储在本地，除非你主动去删除;
  sessionStorage – 是存储到当前页面关闭为止，和其他tab页没关联;
  cookie – 则根据你设置的有效时间来存储，但缺点是不能储存大数据且不易读取，会和后台进行交互。

• 本方法选择的是localStorage

选择的原因是sessionStorage可以保证打开页面时想读取上一次打开页面的数据。