vuex的数据存在内存里面的,浏览器一旦刷新的话,数据就会消失没有了。
我们可以采用vuex-persistedstate 插件实现vuex数据同步到localStorage中
1.安装
yarn add vuex-persistedstate
在vuex组件库入口文件index.js引入,调用,此时会将modules里三个模块放到本地存储里面了
import createPersistedState from "vuex-persistedstate";
let store = new Vuex.Store({
plugins:[
createPersistedState()
],
modules:{
cinema,
tabbar,
city
}
})
这样的话再次刷新就不会重置数据了,而是会保持你自己选择的数据,
如果想要选择个别想要的数据,还可以独立传参,如:
plugins:[
createPersistedState({
reducer:data=>{
return{
city:data.city
}
}
})
],
就会保存在本地想要的数据