led射灯效果图,52楠晓,托玛琳能量杯价格
页面刷新后，想保存页面未保存的数据。我们总是习惯于放在浏览器的sessionstorage和localstorage中。但是用了vue后，vuex便可以被应用了。
vuex优势：相比sessionstorage，存储数据更安全，sessionstorage可以在控制台被看到。
vuex劣势：在f5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。
vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据持久化，也可以通过插件-vuex-persistedstate。
1.手动利用html5的本地存储
方法
问题
最直观的就是，手动写比较麻烦。
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提示生产环境中不使用
const debug = process.env.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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论