怎么解决vuex刷新时数据丢失,刷新页面vuex数据丢失

　　这篇文章主要介绍了状态管理刷新之后数据丢失，数据持久化，vuex-持续状态问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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

　　原因是刷新之后射流研究…初始化，vuex重新初始化了；

常见的解决方案

　　1,已安装里面调接口重新给状态赋值，太麻烦，通过

　　2、手表里面监听状态，再赋值，也很低的

　　状态管理理解不透彻的可以先看看

完美方案是利用sessionStorage/localStorage

　　做一个暂时的储存

　　商店的模块化结构

主要是针对mutations和getters

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

　　突变。射流研究…改变状态的同时在本地做一个备份

　　const setStorage=(key，value)={

　　if (typeof (value)===object) {

　　value=JSON.stringify(value)

　　}

　　sessionStorage.setItem(key，value)

　　}

　　* 避免刷新之后状态管理被重置，在本地存储做一个备份

　　常量突变={

　　set_userInfo(状态，有效负载){

　　state.userInfo=有效负载

　　setStorage(userInfo ，有效负载)

　　set_token(状态，有效负载){

　　state.token=有效负载

　　setStorage(token ，有效负载)

　　集合_角色(状态，有效负载){

　　状态。角色=有效负载

　　setStorage("角色",有效负载)

　　set_breadcrumb(状态，负载){

　　state.breadcrumb=有效负载

　　setStorage(breadcrumb ，有效负载)/* */

　　}

　　导出默认突变

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

　　从" @/utils/createdRoutes.js "导入创建路由

　　从" @/router/index.js "导入{异步路由}

　　let getStoryage=(item)={

　　让str=会话存储。getitem(项目)

　　返回JSON.parse(str)

　　}

　　const getters={

　　get_userInfo: (state)={

　　返回state.userInfo？状态。userInfo:getStoryage( userInfo )

　　get_token: (state)={

　　返回state.token？状态。令牌：会话存储。getitem( token )

　　get_roles: (state)={

　　返回状态。角色。长度？state.roles : getStoryage("角色")

　　addRouters: (state，getters)={

　　let routes=createdRoutes(异步路由，getters.get_roles)

　　返回路线

　　get_breadcrumb: (state，getters)={

　　返回state.breadcrumb.length？状态。面包屑：getStoryage( getStoryage )

　　}

　　导出默认吸气剂

　　在页面某视频剪辑软件文件直接用地图获取者获取状态值

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

　　后记：

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

　　用法：

　　从导入状态 state.js

　　从导入吸气剂./getters.js

　　从导入突变 mutations.js

　　从导入操作 actions.js

　　从" vuex "导入状态管理

　　从“vue”导入某视频剪辑软件

　　从" @/utils/util "导入{ deepCopy }

　　从" vuex-持续状态"导入createPersistedState

　　Vue.use(Vuex)

　　let store=new Vuex .商店({

　　strict: process.env.NODE_ENV！==生产，

　　状态，

　　吸气剂，

　　突变，

　　行动，

　　插件：[createPersistedState({

　　存储：window.sessionStorage

　　减速器（状态){

　　let _state=deepCopy(state) //深拷贝一份删除不想保存的

　　delete _state.hasLogin

　　delete _state.ziYuanLaiYuan

　　删除状态

　　delete _state.taxPersonType

　　返回状态

　　}

　　})]

　　})

　　导出默认存储

　　深拷贝

　　``狂欢

　　/**

　　* 深拷贝

　　* @ param {数组，对象}对象

　　export const deepCopy=(obj)={

　　//根据目标文件的类型判断是新建一个数组还是一个对象

　　让newObj=obj实例of数组？[] : {};

　　for (let key in obj) {

　　//判断属性值的类型，如果是对象递归调用深拷贝

　　new obj[key]=obj[key]的类型=== object ？deepCopy(obj[key]):obj[key]；

　　}

　　返回newObj

　　}

如何让vuex数据持久化

为什么要让vuex数据持久化

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

如何将vuex中的数据持久化

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

　　//安装依赖包

　　npm安装vuex-持续状态-保存

　　2.使用vuex-persistedstate插件实现持久性

　　Key是存储数据(本地存储)的密钥名。路径是那些需要存储在状态中的数据。如果是模块下的数据，在前面加上模块名。插件需要一个一维数组，否则它将从“Vuex-Persistent State”中解析错误导入创建持久状态

　　const store=new Vuex。商店({

　　//.

　　插件：[

　　createPersistedState({

　　关键字：“stort”，

　　可以写多个。

　　路径：[userinfo ，]

　　})

　　]

　　})

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

　　从“vuex-persistedstate”导入createPersistedState

　　const store=new Vuex。商店({

　　//.

　　插件：[createPersistedState({

　　存储：window.sessionStorage，

　　减速器(val) {

　　返回{

　　//仅保存状态为的评估数据

　　评估数据：val .评估数据

　　}

　　})]

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

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。