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