vuex刷新数据丢失,数据持久化,vuex-persistedstate

时间:2022-05-28 秋刀鱼笛滋味人气:3

为什么刷新之后vuex的状态就没了？

原因是刷新之后js初始化，vuex重新初始化了；

常见的解决方案

1，mounted里面调接口重新给state赋值，太麻烦，pass

2，watch里面监听state,再赋值，也很low

vuex理解不透彻的可以先看看

完美方案是利用sessionStorage/localStorage

做一个暂时的储存

store的模块化结构

在这里插入图片描述

主要是针对mutations和getters

做一个简单的赋值和取值封装

mutations.js改变state的同时在本地做一个备份

const setStorage = (key, value) => {
  if (typeof (value) === 'object') {
    value = JSON.stringify(value)
  }
  sessionStorage.setItem(key, value)
}
/*
* 避免刷新之后vuex被重置，在sessionStorage做一个备份
 */
const mutations = {
  set_userInfo (state, payload) {
    state.userInfo = payload
    setStorage('userInfo', payload)
  },
  set_token (state, payload) {
    state.token = payload
    setStorage('token', payload)
  },
  set_roles (state, payload) {
    state.roles = payload
    setStorage('roles', payload)
  },
  set_breadcrumb (state, payload) {
    state.breadcrumb = payload
    setStorage('breadcrumb', payload)/*  */
  }
}
export default mutations

getters.js 取值时默认从state里面取，没有就从本地拿

import createdRoutes from '@/utils/createdRoutes.js'
import { asyncRoutes } from '@/router/index.js'
let getStoryage = (item) => {
  let str = sessionStorage.getItem(item)
  return JSON.parse(str)
}
const getters = {
  get_userInfo: (state) => {
    return state.userInfo ? state.userInfo : getStoryage('userInfo')
  },
  get_token: (state) => {
    return state.token ? state.token : sessionStorage.getItem('token')
  },
 get_roles: (state) => {
    return state.roles.length ? state.roles : getStoryage('roles')
  },
  addRouters: (state, getters) => {
    let routes = createdRoutes(asyncRoutes, getters.get_roles)
    return routes
  },
  get_breadcrumb: (state, getters) => {
    return state.breadcrumb.length ? state.breadcrumb : getStoryage('getStoryage')
  }
}
export default getters;

在页面vue文件直接用mapGetters获取状态值

这样一来就算state被清空了，还可以在本地储存里面获取状态值

后记：

本来想写一个插件完成上面的事，结果发现一个已经写好的 vuex-persistedstate

用法：

import state from './state.js'
import getters from './getters.js'
import mutations from './mutations.js'
import actions from './actions.js'
import Vuex from 'vuex'
import Vue from 'vue'
import { deepCopy } from '@/utils/util'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)
let store = new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  state,
  getters,
  mutations,
  actions,
  plugins: [createPersistedState({
    storage: window.sessionStorage,
    reducer (state) {
      let _state = deepCopy(state) // 深拷贝一份 删除不想保存的
      delete _state.hasLogin
      delete _state.ziYuanLaiYuan
      delete _state.orderStatus
      delete _state.taxPersonType
      return _state
    }
  })]
})
export default store

深拷贝

```bash
/**
 * 深拷贝
 * @param {Array,Object} obj
 */
export const deepCopy = (obj) => {
  // 根据obj的类型判断是新建一个数组还是一个对象
  let newObj = obj instanceof Array ? [] : {};
  for (let key in obj) {
    // 判断属性值的类型，如果是对象递归调用深拷贝
    newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
  }
  return newObj;
}

如何让vuex数据持久化

为什么要让vuex数据持久化

在使用vuex的时候，会发现刷新页面之后state中存储的数据会被重置，因为刷新浏览器的时候会导致整个页面重新加载，vuex的state也会全部重新加载，所以为了防止这类情况的发生，我们会将vuex中的数据进行本地存储，防止页面刷新丢失vuex中的数据。

如何将vuex中的数据持久化

1.我们需要安装一个插件，我们需要借助这个vuex-persistedstate插件进行持久化

// 安装依赖包
npm install vuex-persistedstate  --save

2.使用vuex-persistedstate插件来进行持久化

key是存储数据的键名(本地存储)
paths是state中那些需要被的数据，如果是模块下的数据，则在前面加上模块名称
plugins要的是一个一维数组不然会解析错误

import createPersistedState from 'vuex-persistedstate'
 
const store = new Vuex.Store({
  // ...
  plugins: [
    createPersistedState({
    key: 'stort',
     可以写多个
    paths: ['userinfo', ......]
      })
  ]
})

3.指定需要持久化的数据

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
 // ...
 plugins: [createPersistedState({
  storage: window.sessionStorage,
  reducer(val) {
   return {
   // 只储存state中的assessmentData
   assessmentData: val.assessmentData
  }
  }
 })]

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

加载全部内容