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