Vuex 无法持久化存储---借助本地存储完成用户登录

场景：用户登录需要携带 token 向服务端获取数据，但是如果将 token 存储在Vuex当中，刷新页面时 token 将被清空，导致服务器无法根据 token 返回对应的用户数据

原因：Vuex是无法持久化存储的

解决方法：借助 localStorage 存储 token 实现持久化存储

// 在Vuex文件中

// action内容：

// 登录业务
    async userLogin({ commit }, data) {
        let res = await reqLogin(data)
        // 服务器下发的token很重要，前台需要存储信息，在之后的请求中通过token向服务器要用户信息
        if(res.code == 200){
            // 用户已经登录成功且成功获取到token
            commit('USERLOGIN',res.data.token)
            // 持久化存储token
            localStorage.setItem('Token',res.data.token)
            return 'ok'
        }else {
            return Promise.reject(new Errow('faile'))
        }
    }

登录之后，想要获取用户信息，就需要携带服务器在登录后返回的 token ，再向服务器发送获取用户信息的请求。即在请求头中携带 token

// Vuex文件中

// state部分

const state = {
    code: '',
    token:localStorage.getItem('Token'),
    userInfo:{}
}

通过给Vuex原始 token 字段设置读取本地存储的 token ，在本地存储还没有存储 token 时，其值为 null，当有本都存储之后，就会调用该方法从本地存储中获取 token

在发送请求获取用户数据时，请求头就可以从 Vuex 的 token 字段获取token值了，此时的 token 已经实现了持久化存储