vuex刷新之后数据丢失|vuex刷新之后数据丢失,数据持久化,vuex-persistedstate问题

目录

  • 为什么刷新之后vuex的状态就没了?
    • 常见的解决方案
    • 完美方案是利用sessionStorage/localStorage
    • 主要是针对mutations和getters
  • 如何让vuex数据持久化
    • 为什么要让vuex数据持久化
    • 如何将vuex中的数据持久化

为什么刷新之后vuex的状态就没了? 原因是刷新之后js初始化,vuex重新初始化了;

常见的解决方案
1,mounted里面调接口重新给state赋值,太麻烦,pass
2,watch里面监听state,再赋值,也很low
vuex理解不透彻的可以先看看

完美方案是利用sessionStorage/localStorage
做一个暂时的储存
store的模块化结构
vuex刷新之后数据丢失|vuex刷新之后数据丢失,数据持久化,vuex-persistedstate问题
文章图片


主要是针对mutations和getters
做一个简单的赋值和取值封装
mutations.js改变state的同时在本地做一个备份
const setStorage = (key, value) => {if (typeof (value) === 'object') {value = https://www.it610.com/article/JSON.stringify(value)}sessionStorage.setItem(key, value)}/** 避免刷新之后vuex被重置,在sessionStorage做一个备份 */const mutations = {set_userInfo (state, payload) {state.userInfo = payloadsetStorage('userInfo', payload)},set_token (state, payload) {state.token = payloadsetStorage('token', payload)},set_roles (state, payload) {state.roles = payloadsetStorage('roles', payload)},set_breadcrumb (state, payload) {state.breadcrumb = payloadsetStorage('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.hasLogindelete _state.ziYuanLaiYuandelete _state.orderStatusdelete _state.taxPersonTypereturn _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中的assessmentDataassessmentData: val.assessmentData}} })]

【vuex刷新之后数据丢失|vuex刷新之后数据丢失,数据持久化,vuex-persistedstate问题】以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

    推荐阅读