vuex的数据都存在内存里面,一旦刷新页面,vuex中的状态都会被重置,这对于一些不想被重置的状态数据而言, 是一个不好的表现。对此,我们可以采用 vuex-persistedstate 插件实现vuex数据同步到localStorage中。
一、安装
执行命令:cnpm i --save vuex-persistedstate
二、引用
在vuex组件库入口文件index.js引入并调用,此时会将state中的四个状态放到本地存储localStorage里面
import createPersistedState from "vuex-persistedstate";
export default new Vuex.Store({
plugins:[
createPersistedState()
],
state: {
cityName: '北京',
cityId: '110100',
cinemaList: [],
isTabbarShow: true
},
})
这样的话刷新页面数据就不会丢失了!!!
如果想要选择某个想要的数据,还可以独立传参,如:
plugins: [createPersistedState({
reducer: (state) => {
return {
cityId: state.cityId,
cityName: state.cityName
}
}
})],