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插件
插件的原理其实也是结合了存储⽅式，只是统⼀的配置就不需要⼿动每次都写存储⽅法
使⽤⽅法
安装
npm install vuex-persistedstate --save
引⼊及配置
在store下的index.js中
import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
// ...
plugins: [createPersistedState()]
})
默认存储到localStorage
想要存储到sessionStorage，配置如下
import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
// ...
plugins: [createPersistedState({
storage: window.sessionStorage
})]
})
想使⽤cookie同理
默认持久化所有state
指定需要持久化的state，配置如下
import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
// ...
plugins: [createPersistedState({
storage: window.sessionStorage,
reducer(val) {
return {
// 只储存state中的assessmentData
assessmentData: val.assessmentData
}
}
})]
vuex引⽤多个插件的写法
譬如：vuex提⽰的插件和持久化的插件⼀起使⽤，配置如下
import createPersistedState from "vuex-persistedstate"
import createLogger from 'vuex/dist/logger'
// 判断环境 vuex提⽰⽣产环境中不使⽤
sessionstorage和localstorageconst debug = v.NODE_ENV !== 'production'
const createPersisted = createPersistedState({
storage: window.sessionStorage
})
export default new Vuex.Store({
// ...
plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
})
plugins要是⼀个⼀维数组不然会解析错误
API
createPersistedState([options])使⽤给定的选项创建插件的新实例。可以提供以下选项来配置您的特定需求的插件：key <String>：存储持久状态的键。（默认：vuex）
paths <Array>：部分持续状态的任何路径的数组。如果没有路径给出，完整的状态是持久的。（默认：[]）reducer <Function>：⼀个函数，将被调⽤来减少基于给定的路径持久化的状态。默认包含这些值。
subscriber <Function>：⼀个被调⽤来设置突变订阅的函数。默认为store => handler => store.subscribe(handler) storage <Object>：⽽不是（或与）getState和setState。默认为localStorage。
getState <Function>：将被调⽤以重新⽔化先前持久状态的函数。默认使⽤storage。
setState <Function>：将被调⽤来保持给定状态的函数。默认使⽤storage。
filter <Function>：将被调⽤来过滤将setState最终触发存储的任何突变的函数。默认为() => true
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。