Auto Commit

src/components/SearchGrade.vue

@@ -3,13 +3,13 @@ import * as echarts from 'echarts';
 import Author from './Author.vue'
 import { tableColumns } from './const'
 import { getRemoteCsdnGrade } from '../service/csdnApi'
-import { onMounted, reactive, onUnmounted } from 'vue';
+import { onMounted, reactive, onUnmounted, nextTick } from 'vue';
 const state = reactive({
   loading: false,
-  searchValue: localStorage.getItem('csdnUid')||'',
+  searchValue: localStorage.getItem('csdnUid') || '',
   firstChart: null,
   columns: tableColumns,
-  dataSource: [],
+  dataSource: localStorage.getItem('csdnUidData') ? JSON.parse(localStorage.getItem('csdnUidData')) : [],
   pagination: {
     total: 0,
     current: 1,
@@ -22,6 +22,8 @@ const state = reactive({
     onChange: changePage,//点击页码事件
   }
 })
+
+// storage
 function changePage(page, pageSize) {
   state.pagination.current = page
   state.pagination.pageSize = pageSize
@@ -41,6 +43,7 @@ const getCsdnData = (uId) => {
     state.pagination.total = state.dataSource.length
     state.loading = false
     initFirstData()
+    window.localStorage.setItem('csdnUidData', JSON.stringify(state.dataSource))
   }).catch((r) => {
     state.pagination.total = 0
     console.log(r)
@@ -149,9 +152,9 @@ function initFirstData() {
               }
             }
           },
-            data: [{ type: 'average', name: '平均分' }]
-          }
+          data: [{ type: 'average', name: '平均分' }]
         }
+      }
     ]
   };
   // 使用刚指定的配置项和数据显示图表。
@@ -169,12 +172,16 @@ function initFirstData() {
   });
 
   onMounted(() => {
-    const storageUid = window.localStorage.getItem('csdnUid')
-    console.log('window.localStorage', window.localStorage)
-    console.log('storageUid', storageUid)
-    if (storageUid) {
-      state.searchValue = storageUid
-      onSearch()
+    // const storageUid = window.localStorage.getItem('csdnUid')
+    // console.log('window.localStorage', window.localStorage)
+    // console.log('storageUid', storageUid)
+    // if (storageUid) {
+    //   state.searchValue = storageUid
+    //   onSearch()
+    // }
+    // storage
+    if (state.dataSource) {
+      initFirstData();
     }
   })
   onUnmounted(() => {
@@ -182,6 +189,9 @@ function initFirstData() {
     if (state.searchValue) {
       window.localStorage.setItem('csdnUid', state.searchValue)
     }
+    if (state.dataSource) {
+      window.localStorage.setItem('csdnUidData', JSON.stringify(state.dataSource))
+    }
   })
 }
 </script>
@@ -196,8 +206,8 @@ function initFirstData() {
     </div>
     <br>
     <div>
-      <a-input-search v-model:value="state.searchValue" :disabled="state.loading" placeholder="输入用户id(如 qq_38870145)" enter-button
-        @search="onSearch" />
+      <a-input-search v-model:value="state.searchValue" :disabled="state.loading" placeholder="输入用户id(如 qq_38870145)"
+        enter-button @search="onSearch" />
     </div>
 
     <br>