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，刷新之后会不同。