vue-router - vuex 页面刷新 用localStorage保存数据的方案

问题描述

问 题

大家都知道 使用vuex保存的state 在页面刷新后都会恢复默认值，网上的解决方案 很多，我是使用localStorage保存 当页面刷新时 如果发现store.state.userInfo.islogin这个状态为false的时候 用localStorage里存的token去访问后台得到是否已经登录 如果是则修改islogin的状态。但是action里的操作是异步的，let islogin = store.state.userInfo.islogin （false） 之后再访问后台之后才state里的islogin才为true。。。请问一下这个问题有什么好的解决方案吗

以下是相关代码

router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    // localStorage.removeItem('token')
  }
  if (!store.state.userInfo.islogin) {
    store.dispatch('IS_LOGIN')
    console.log(store)
  }
  let islogin = store.state.userInfo.islogin //false
  console.log('sss', islogin, store)
  if (!islogin && to.path !== '/login') {
    next({ path: '/login' })
  } else {
    next()
  }
})

actions

  [IS_LOGIN] ({ commit }) {
    commit(SET_USER_INFO, JSON.parse(localStorage.getItem('token')))
    console.log(api, state)
    api.apiObj.admin.islogin(state.userInfo)
          .then((res) => {
            if (res.status) {
              commit(SUCCESS_GET_SNSLOGINS, true)
              Message.success(res.msg)
            } else {
              Message.error(res.msg)
              return commit(FAILURE_GET_SNSLOGINS)
            }
          })
  }

mutations

[SET_USER_INFO] (state, data) {
    state.userInfo = data
  },
  [FAILURE_GET_SNSLOGINS] (state) {
    state.islogin = false
  },
  [SUCCESS_GET_SNSLOGINS] (state, status) {
    state.islogin = status
  }

解决方案

一方面你可以等状态从服务器端返回再显示页面。

另一方面即使先初始化再返回数据也无所谓吧，Vue 类 MVVM 框架最擅长的就是处理数据渲染呀。

这篇关于vue-router - vuex 页面刷新 用localStorage保存数据的方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！