vuex和localstorage结合使用,实现组件内通信,刷新数据不丢失。
vuex:专为vue开发的一个状态管理模式,相当于保存数据的一个大仓库,可以在任何地方对数据进行改变,其他组件中使用该数据时可以实时更新。
localstorage:浏览器缓存,将数据保存在本地,除非被清除,否则永久保存。
两者区别:
1.vuex中的数据是保存在内存,所以刷新页面相当于是清除内存,vuex中保存的数据会清空。而localstorage中的数据是保存在本地,刷新页面数据仍然存在。
2.vuex主要用于多组件通信,在其中一个组件中改变数据时,其他组件实时获取。而localstorage不会。
3.vuex经常用于保存需要经常改变的数据,如果数据不怎么改变的话,可以考虑只使用localstorage保存,多个页面获取使用。
可以结合两者,实现组件内通信,同时刷新页面时数据不丢失。
实现代码:
1.vuex:
state:{ catalog_id: '', }, mutations:{ setCatalog_id: (state, catalog_id) => { localStorage.setItem('catalog_id',catalog_id); state.catalog_id = catalog_id; } }, const getters = { getCatalog_id: (state) => { state.user.catalog_id = localStorage.getItem('catalog_id'); return state.user.catalog_id; } }
2.其中一个组件中改变数据:
handleNodeClickThis(node,data,value){ this.catalog_id = node.catalog_id; this.treeCur = 1; this.$store.commit('setCatalog_id', this.catalog_id); // localStorage.setItem('catalog_id', this.catalog_id) }
3.其他组件中监听数据的改变,并做出其他操作:
computed: { catalog_id(){ return this.$store.getters.getCatalog_id; // return localStorage.getItem('catalog_id') } }, watch: { catalog_id: function(){ this.getFileInfo(); } },
注意:
1.在监听数据catalog_id时,需要先使用computed计算出该数据在state中的值,然后再使用watch监听数据的变化,做其他操作。
2.将catalog_id直接在data中赋值,数据改变时,通过watch是监听不到的,因为data里的数据在组件加载完成后就初始化完了,只能被动改变,不能自动做出更新。
3.只使用localstorage存储数据,通过watch也是监听不到的,因为数据保存在本地,不在内存中。
4.vuex结合localstorage,就相当于是在set和get值时,多使用了localstorage来存储和获取。关于vuex的详细介绍,下次补上。
5.state中存的数据的值和通过get来取数据的值,因为多了一层localstorage,刷新之后会不同。