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

参考链接：https://www.cnblogs.com/5201314m/p/12566398.html

也可以使用 插件 vuex-persist 

参考：Vuex持久化存储之vuex-persist