vuex是在中大型项目中必不可少的状态管理组件,刷新会重新更新状态,但是有时候我们并不希望如此。例如全局相关的,如登录状态、token、以及一些不常更新的状态等,我们更希望能够固化到本地,减少无用的接口访问,以及更佳的用户体验。
- 那么我们可以采用存储到localStorage的方式来解决这一问题,
- 也可以监听页面刷新的时候重新处理数据
- 也可以用现在比较流行的插件vuex-persistedstate来解决(其实他的原理也是存储在了local storage,但是不用我们手动去处理了)
让我们来看下使用插件是如何做到持久化的
1.安装插件
npm i vuex-persistedstate --save
2.之前怎么写vuex的数据管理还怎么写,只不过在store/index.js文件引入一下这个插件,并配置即可
这种默认写法会将vuex中的所有数据存储到Local Storage中,
import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
// ...
plugins: [createPersistedState ()]
})
如果我们想存储到sessionStorage,又或者只想持久化某些数据的话,可以使用以下两个属性:
storage和reducer
plugins: [createPersistedState({
storage: window.sessionStorage,
reducer(val) {
console.log(val)
return {
// 只储存state中的includes的leftList数据【这里多了一层includes,是因为本项目原因,大家可以打印一下val根据自己项目情况来赋值】
leftList: val.includes.leftList
}
}
})
]
完整代码如下:
测试1:将所有数据存储到Session Storage中
测试2:将某个数据存储到Local Storage中
另,Vue3中如果项目使用了ts,那么Vuex对ts是不太友好的,可以考虑使用pinia插件代替vuex