Vuex实现数据持久化,数据刷新消失解决方案(新)
为什么会有vuex数据持久化这么一说呢?
在开发中,有一些全局数据,比如用户数据,系统数据等。这些数据很多组件中都会使用,我们当然可以每次使用的时候都去请求,但是出于程序员的“洁癖”、“抠”等等优点,还是希望一次请求,到处使用。
这时候很自然的想到存储在 localStorage 中,但是有个问题是,这些数据可能会变,如果没能及时同步的话,就会用到不正确的数据,即使做了数据同步,但是 localStorage 中的数据不是响应式的,不能自动更新使用到这些数据的地方。这时候就想要开始使用 vuex 了。
但是在使用 vuex 的时候也遇到很多问题,比如,“一刷新就没啦”:
vuex 的数据是存储在浏览器维护的内存中,页面刷新会重新初始化,简单的说,就是没了。
localStorage 的数据是存储在浏览器维护的一个简单数据库里面,在本地文件中存储,所以可以“持久化”存在。
所以“一刷新就没啦”是很正常的。
下面就是解决的方案
首先第一种
使用localStorage 来进行存储,但是这样有一个问题
我们的数据是会更新的,但是我们如果存进localStorage里,就无法实时更新我们的数据,
哪怕我们真的做了数据同步,他的数据也不是响应式的,所以这个方法不建议使用!
第二种 使用vuex的插件 来解决
使用vuex-persistedstate
首先我们先安装这个插件
npm i -S vuex-persistedstate
配置使用
在vuex初始化的时候作为组件去引入
import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
// ...
plugins: [persistedState()]
})
vuex-persistedstate默认使用localStorage来固化数据,一些特殊情况要如何应对呢?(如:Mac中的safari的无痕浏览模式)
这时候就需要使用sessionStorage
plugins: [
persistedState({ storage: window.sessionStorage })
]
还有一种就是使用cookie的时候
import persistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
export default new Vuex.Store({
// ...
plugins: [
persistedState({
storage: {
getItem: key => Cookies.get(key),
setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
removeItem: key => Cookies.remove(key)
}
})
]
})
最后我们在页面里需要使用辅助函数以及dispatch来触发就可以实现数据持久化
这样我们就可以使用vuex来进行储存数据了