如何让vuex数据持久化
1.为什么要让vuex数据持久化在使用vuex的时候,会发现刷新页面之后state中存储的数据会被重置,因为刷新浏览器的时候会导致整个页面重新加载,vuex的state也会全部重新加载,所以为了防止这类情况的发生,我们会将vuex中的数据进行本地存储,防止页面刷新丢失vuex中的数据。2.如何将vuex中的数据持久化1.我们需要安装一个插件,我们需要借助这个vuex-persistedstate插
·
1.为什么要让vuex数据持久化
在使用vuex的时候,会发现刷新页面之后state中存储的数据会被重置,因为刷新浏览器的时候会导致整个页面重新加载,vuex的state也会全部重新加载,所以为了防止这类情况的发生,我们会将vuex中的数据进行本地存储,防止页面刷新丢失vuex中的数据。
2.如何将vuex中的数据持久化
1.我们需要安装一个插件,我们需要借助这个vuex-persistedstate插件进行持久化
// 安装依赖包
npm install vuex-persistedstate --save
2.使用vuex-persistedstate插件来进行持久化
一.key是存储数据的键名(本地存储)
二.paths是state中那些需要被的数据,如果是模块下的数据,则在前面加上模块名称
三.plugins要的是一个一维数组不然会解析错误
import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
// ...
plugins: [
createPersistedState({
key: 'stort',
可以写多个
paths: ['userinfo', ......]
})
]
})
3.指定需要持久化的数据
import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
// ...
plugins: [createPersistedState({
storage: window.sessionStorage,
reducer(val) {
return {
// 只储存state中的assessmentData
assessmentData: val.assessmentData
}
}
})]
更多推荐
已为社区贡献1条内容
所有评论(0)