1、原因

vuex里用来存储的也只是一个全局变量,当页面刷新,该全局变量自然不存在了。

2、解决

使用localStorage存储一份

(1)storage.js

/**
* vuex localStorage plugin
*/
const IS_ALL = 0 export default function storagePlugin({ namespace = 'mfg-vux-',
storage = localStorage,
persistence = []
} = {}) { let serialize = JSON.stringify,
deserialize = JSON.parse,
isAll = persistence.length === IS_ALL /**
* 获取持久化的state
* @param {[type]} state [description]
* @return {[type]} [description]
*/
function getState(state) { let data = {},
keys = isAll ? Object.keys(state) : persistence,
i = 0,
len = keys.length for (; i < len; i++) { let key = keys[i],
value = deserialize(storage.getItem(namespace + key)) data[key] = value === null ? state[key] : value
} return data
} /**
* 持久化state
* @param {[type]} state [description]
*/
function setState(state) { let keys = isAll ? Object.keys(state) : persistence,
i = 0,
len = keys.length for (; i < len; i++) { let key = keys[i] storage.setItem(namespace + key, serialize(state[key]))
}
} return store => { let state = store.state // 初始化state
store.replaceState( _.merge( {},
state,
getState(state)
)
) // 持久化state
store.subscribe((mutation, state) => { setState(state)
})
}
}

(2)vuex部分代码

import storage from './plugins/storage'
export default new Vuex.Store({ state,
mutations,
getters,
actions,
plugins: [storage({ // 要保存的变量
persistence: ['testText']
})],
strict: process.env.NODE_ENV !== 'production'
})

变量在localestorage中被保存了:

页面刷新 vuex 数据重新被初始化的更多相关文章

  1. 页面刷新vuex数据消失问题解决方案 之 vuex中间件

    之前我写了一篇用ES6 Proxy方案解决数据同步的文章 页面刷新vuex数据消失问题解决方案. 今天和同事沟通这个vuex数据还原问题,我说我的方法很奇异.聊着聊着,同事咋不用  store.sub ...

  2. 页面刷新vuex数据消失问题解决方案

    VBox持续进行中,哀家苦啊,有没有谁给个star. vuex是vue用于数据存储的,和redux充当同样的角色. 最近在VBox开发的时候遇到的问题,页面刷新或者关闭浏览器再次打开的时候数据归零.这 ...

  3. vue:vue页面刷新vuex数据消失问题

    vuex中数据刷新页面消失问题:a页面请求的数据保存在vuex中,只要不刷新,那跳转到b页面里也可以用,但如果b页面刷新,那vuex里的数据就会消失,可以得解决方法:a页面用的数据a页面的生命周期函数 ...

  4. 使用sessionStorage解决vuex在页面刷新后数据被清除的问题

    https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器 ...

  5. vue 使用localStorage解决vuex在页面刷新后数据被清除的问题

    通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...

  6. 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题

    通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...

  7. JS页面刷新保持数据不丢失

    转自:https://blog.csdn.net/qq_32439101/article/details/78134877 下面是 DOM Storage 的接口定义: interface Stora ...

  8. djano modles values+ajax实现无页面刷新更新数据

    做项目的过程中想通过不刷新页面的方式来进行页面数据刷新,开始使用http://www.cnblogs.com/ianduin/p/7761400.html方式将查询结果数据进行序列化.发现可以行,但是 ...

  9. 2、vuex页面刷新数据不保留,解决方法(转)

    今天这个问题又跟页面的刷新有一定的关系,虽然说跟页面刷新的关系不大,但确实页面刷新引起的这一个问题. 场景: VueX里存储了 this.$store.state.PV这样一个变量,这个变量是在app ...

随机推荐

  1. Stirling数,Bell数,Catalan数,Bernoulli数

    组合数学的实质还是DP,但是从通式角度处理的话有利于FFT等的实现. 首先推荐$Candy?$的球划分问题集合: http://www.cnblogs.com/candy99/p/6400735.ht ...

  2. MySQL启动项提权

    关于MySQL的启动项提权,听其名知其意.就是将一段 VBS脚本导入到  C:\Documents and Settings\All Users\「开始」菜单\程序\启动 下,如果管理员重启了服务器, ...

  3. April Fools Day Contest 2016 A. Da Vinci Powers

    A. Da Vinci Powers 题目连接: http://www.codeforces.com/contest/656/problem/A Description The input conta ...

  4. 使用本地的Nuget Repository加速Nuget访问速度

    Nuget是一个在VisualStudio下的非常好用的包管理器,然而由于众所周知的原因,其访问速度非常令人抓狂,甚至抽风.在没有VPN的环境下,如何解决这一问题呢?常见的解决方案是自己搭建一个Nug ...

  5. HDU 4696 Answers (2013多校10,1001题 )

    Answers Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total S ...

  6. 查看系统自带的RPM

    我在home目录下创建了目录mei 1.管理员权限 su 2.进入mei目录 cd /home/mei 3.创建cdrom目录作为挂载点 mkdir cdrom 4.把目录 /dev/cdrom-hd ...

  7. weblogic打补丁,bsu方法

    刚装了10.3.6版本的weblogic,想把版本补丁到10.3.6.0.12 我用的系统是windows 8.1 ,呵呵 查看版本 执行java weblogic.version WebLogic ...

  8. Android Binder总结

    1. MediapplayerService 的启动,怎样在ServiceManager注冊的,不解说详细的细节 ServiceManager 是整个系统的Service总管,其余的系统服务都是通过d ...

  9. Androidclient与服务端交互之登陆演示样例

    今天了解了一下androidclient与服务端是如何交互的,发现事实上跟web有点类似吧,然后网上找了大神的登陆演示样例.是基于IntentService的 1.后台使用简单的servlet,支持G ...

  10. UIBezierPath的使用(持续更新)

    UIBezierPath的使用 1. 使用UIBezierPath绘制多边形 // 获取path UIBezierPath *aPath = [UIBezierPath bezierPath]; // ...