Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
页面刷新后，想保存页面未保存的数据。我们总是习惯于放在浏览器的sessionStorage和localStorage中。但是用了vue后，vuex便可以被应用了。
vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。
vuex劣势：在F5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。
vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据持久化，也可以通过插件-vuex-persistedstate。
1.手动利用HTML5的本地存储
方法
- vuex的state在localStorage或sessionStorage或其它存储方式中取值
- 在mutations,定义的方法里对vuex的状态操作的同时对存储也做对应的操作。这样state就会和存储一起存在并且与vuex同步
问题
最直观的就是，手动写比较麻烦。
2.利用vuex-persistedstate插件
插件的原理其实也是结合了存储方式,只是统一的配置就不需要手动每次都写存储方法
使用方法
安装
npminstallvuex-persistedstate--save
引入及配置
在store下的index.js中
importcreatePersistedStatefrom"vuex-persistedstate"
conststore=newVuex.Store({
//...
plugins:[createPersistedState()]
})
默认存储到localStorage
想要存储到sessionStorage，配置如下
importcreatePersistedStatefrom"vuex-persistedstate"
conststore=newVuex.Store({
//...
plugins:[createPersistedState({
storage:window.sessionStorage
})]
})
想使用cookie同理
默认持久化所有state
指定需要持久化的state,配置如下
importcreatePersistedStatefrom"vuex-persistedstate"
conststore=newVuex.Store({
//...
plugins:[createPersistedState({
storage:window.sessionStorage,
reducer(val){
return{
//只储存state中的assessmentData
assessmentData:val.assessmentData
}
}
})]
vuex引用多个插件的写法
譬如：vuex提示的插件和持久化的插件一起使用，配置如下
importcreatePersistedStatefrom"vuex-persistedstate"
importcreateLoggerfrom'vuex/dist/logger'
//判断环境vuex提示生产环境中不使用
constdebug=process.env.NODE_ENV!=='production'
constcreatePersisted=createPersistedState({
storage:window.sessionStorage
})
exportdefaultnewVuex.Store({
//...
plugins:debug?[createLogger(),createPersisted]:[createPersisted]
})
plugins要是一个一维数组不然会解析错误
API
createPersistedState([options])使用给定的选项创建插件的新实例。可以提供以下选项来配置您的特定需求的插件：
key
paths
reducer
subscriber
storage
getState
setState
filter
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。