欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

持久化保存vuex数据-解决页面刷新后丢失vuex数据的问题

程序员文章站 2022-07-13 22:46:40
...

解决思路:

  1. 在使用vuex存储数据时,同时使用cookie或者localstorage存储
  2. 每次进入路由判断vuex数据是否为空
  3. 如果为空则重新commit数据(数据从cookie或者localstorage获取)

src目录下建立permission.js,引入main.js

import router from './router'
import store from './store'
import Cookies from 'js-cookie'

const whiteList = ['/login', '/register'] // 路由白名单

router.beforeEach((to, form, next) => {
  const userInfo = Cookies.get('userInfo') // cookies获取用户信息
  if (userInfo) { // 用户信息存在
    if (to.path === '/login') { // 判断是否访问的login
      next({path: '/'}) // 已登录状态不允许访问login,返回后台首页
    } else {
      const user = store.state.userInfo // 从vuex获取用户信息
      if (Object.keys(user).length === 0) { // 用户信息为空
        store.commit('saveUserInfo', JSON.parse(userInfo)) // 将cookies的用户信息传给vuex的state
        next()
      } else {
        next()
      }
    }
  } else { // 用户信息不存在
    if (whiteList.indexOf(to.path) !== -1) { // 用户信息不存在,访问的为白名单路由
      next()
    } else {
      next(`/login?redirect=${to.path}`) // 访问的路由为非白名单路由,跳转login
    }
  }
})

mutation中的saveUserInfo函数:

saveUserInfo(state, userInfo) {
  state.userInfo = userInfo
}

扩展

  1. cookies和localstore一样不能存储对象,可以使用JSON.stringfy转为字符串存储,通过JSON.parse获取对象
  2. 判断对象是否为空
let obj = {}
Object.keys(obj).length === 0 // true
  1. 使用页面加载进度条
    npm i nprogress
    permission.js中引入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach里加入NProgress.start()
router.afterEach里加入NProgress.done()