perf: fix table setting error

src/components/Table/AutoDataTable/index.vue

@@ -23,11 +23,11 @@
 <script type="text/jsx">
 import DataTable from '@/components/Table/DataTable/index.vue'
 import {
-  ActionsFormatter, ArrayFormatter, ChoicesFormatter, DateFormatter, DetailFormatter, DisplayFormatter,
-  ObjectRelatedFormatter
+  ActionsFormatter, ArrayFormatter, ChoicesFormatter, DateFormatter,
+  DetailFormatter, DisplayFormatter, ObjectRelatedFormatter
 } from '@/components/Table/TableFormatters'
 import i18n from '@/i18n/i18n'
-import { newURL, replaceAllUUID, toSentenceCase } from '@/utils/common'
+import { newURL, ObjectLocalStorage, replaceAllUUID, toSentenceCase } from '@/utils/common'
 import ColumnSettingPopover from './components/ColumnSettingPopover.vue'
 import LabelsFormatter from '@/components/Table/TableFormatters/LabelsFormatter.vue'
 
@@ -62,7 +62,8 @@ export default {
         currentCols: [],
         defaultCols: []
       },
-      isDeactivated: false
+      isDeactivated: false,
+      objTableColumns: new ObjectLocalStorage('tableColumns')
     }
   },
   computed: {
@@ -429,13 +430,9 @@ export default {
       const minColumnsNames = _.get(this.iConfig, 'columnsShow.min', ['actions', 'id'])
         .filter(n => totalColumnsNames.includes(n))
 
-      // 应该显示的列
-      const _tableConfig = localStorage.getItem('tableConfig')
-        ? JSON.parse(localStorage.getItem('tableConfig'))
-        : {}
       let tableName = this.config.name || this.$route.name + '_' + newURL(this.config.url).pathname
       tableName = replaceAllUUID(tableName)
-      const configShowColumnsNames = _.get(_tableConfig[tableName], 'showColumns', null)
+      const configShowColumnsNames = this.objTableColumns.get(tableName)
       let showColumnsNames = configShowColumnsNames || defaultColumnsNames
       if (showColumnsNames.length === 0) {
         showColumnsNames = totalColumnsNames
@@ -482,17 +479,12 @@ export default {
       }
       this.popoverColumns.currentCols = columns
 
-      const _tableConfig = localStorage.getItem('tableConfig')
-        ? JSON.parse(localStorage.getItem('tableConfig'))
-        : {}
       let tableName = this.config.name || this.$route.name + '_' + newURL(url).pathname
       // 替换url中的uuid，避免同一个类型接口生成多个key，localStorage中的数据无法共用.
       tableName = replaceAllUUID(tableName)
 
-      _tableConfig[tableName] = {
-        'showColumns': columns
-      }
-      localStorage.setItem('tableConfig', JSON.stringify(_tableConfig))
+      this.objTableColumns.set(tableName, columns)
+
       this.filterShowColumns()
     },
     filterChange(filters) {

src/components/Table/DataTable/index.vue

@@ -10,6 +10,8 @@
 </template>
 
 <script>
+import { ObjectLocalStorage } from '@/utils/common'
+import { newURL } from '@/utils/common'
 import { default as ElDatableTable } from './compenents/el-data-table'
 import { mapGetters } from 'vuex'
 
@@ -27,7 +29,11 @@ export default {
   },
   data() {
     const userTableActions = this.config.tableActions || {}
+    const objTableSize = new ObjectLocalStorage('tableSize')
+    const pathName = newURL(this.config.url).pathname
     return {
+      objTableSize: objTableSize,
+      pathName: pathName,
       defaultConfig: {
         axiosConfig: {
           raw: 1,
@@ -70,7 +76,7 @@ export default {
         },
         pageCount: 5,
         paginationLayout: 'total, sizes, prev, pager, next',
-        paginationSize: JSON.parse(localStorage.getItem('paginationSize')) || 15,
+        paginationSize: objTableSize.get(pathName) || 15,
         paginationSizes: [15, 30, 50, 100],
         paginationBackground: true,
         transformQuery: query => {
@@ -157,13 +163,7 @@ export default {
       this.$emit('loaded')
     },
     handleSizeChange(val) {
-      localStorage.setItem('paginationSize', val)
-      this.$store.commit('table/SET_TABLE_CONFIG',
-        {
-          key: 'paginationSize',
-          value: val
-        }
-      )
+      this.objTableSize.set(this.pathName, val)
     }
   }
 }

src/store/modules/table.js

@@ -1,5 +1,3 @@
-import Vue from 'vue'
-
 function getTableConfigFromLocal() {
   const configs = localStorage.getItem('tableConfig')
   try {
@@ -25,11 +23,6 @@ const state = {
 }
 
 const mutations = {
-  SET_TABLE_CONFIG: (state, item) => {
-    const _tableConfig = getTableConfigFromLocal()
-    Vue.set(_tableConfig, item.key, item.value)
-    localStorage.setItem('tableConfig', JSON.stringify(_tableConfig))
-  },
   SET_PROTOCOL_MAP_ITEM: (state, item) => {
     state.protocolMap.set(item.key, item.value)
     const obj = Object.fromEntries(state.protocolMap)

src/utils/common.js

@@ -388,21 +388,27 @@ export class ObjectLocalStorage {
     } catch (e) {
       console.warn('localStorage value is not a valid JSON: ', this.key)
     }
-    if (typeof value !== 'object') {
+    if (!value || typeof value !== 'object') {
       value = {}
     }
     return value
   }
 
-  get(attr) {
+  get(attr, defaults) {
     const obj = this.getObject(this.key)
     const attrSafe = this.b64(attr)
-    return obj[attrSafe]
+    const val = obj[attrSafe]
+    if (val === undefined) {
+      return defaults
+    }
+    return val
   }
 
   set(attr, value) {
     const obj = this.getObject(this.key)
     const attrSafe = this.b64(attr)
+    console.log('Obj: ', obj)
+    console.log('Set to: ', attr, value)
     obj[attrSafe] = value
     window.localStorage.setItem(this.key, JSON.stringify(obj))
   }