fix: 完善单测demo(indexedDB相关)

src/Test.vue

@@ -11,12 +11,14 @@
 import { useRoute, useRouter } from 'vue-router'
 import axios from 'axios'
 import { ref } from 'vue'
+import indexedDBUtils from '@/indexedDB'
 export default {
   name: 'Test',
   data () {
     return {
       count: 0,
-      obj: { id: 1, title: 'title' }
+      obj: { id: 1, title: 'title' },
+      indexedDBValue: null
     }
   },
   methods: {
@@ -35,6 +37,12 @@ export default {
       axios.get('/api/getCount').then(response => {
         this.count = response.data
       })
+    },
+    async setIndexedDBValue () {
+      await indexedDBUtils.selectTable('test').put({ id: 1, name: 'test' })
+    },
+    async getIndexedDBValue () {
+      this.indexedDBValue = await indexedDBUtils.selectTable('test').get(1)
     }
   },
   setup () {

src/indexedDB/index.js

@@ -1,8 +1,19 @@
 import { dbName, dbGeoDataTableName, dbDrilldownTableConfig } from '@/utils/constants'
 import Dexie from 'dexie'
+/* https://dexie.org/ */
 
-export const db = new Dexie(dbName)
-db.version(2).stores({
+const db = new Dexie(dbName)
+db.version(3).stores({
   [dbGeoDataTableName]: '++name, geo',
-  [dbDrilldownTableConfig]: '++id, config'
+  [dbDrilldownTableConfig]: '++id, config',
+  test: '++id, name'
 })
+function selectTable (tableName) {
+  return db[tableName]
+}
+
+const indexedDBUtils = {
+  db,
+  selectTable
+}
+export default indexedDBUtils

src/store/modules/user.js

@@ -5,7 +5,7 @@ import { ElMessage } from 'element-plus' // dependent on utc plugin
 import { storageKey, dbDrilldownTableConfig } from '@/utils/constants'
 import { getConfigVersion } from '@/utils/tools'
 import { api } from '@/utils/api'
-import { db } from '@/indexedDB'
+import indexedDBUtils from '@/indexedDB'
 
 const user = {
   state () {
@@ -92,7 +92,7 @@ const user = {
         if (res.code === 200 && res.page.list && res.page.list.length > 0) {
           // 从接口返回整体配置，再读取用户缓存，将对应条目覆盖，作为使用的配置
           const defaultConfigs = JSON.parse(res.page.list[0].cvalue)
-          await db[dbDrilldownTableConfig].put({
+          await indexedDBUtils.selectTable(dbDrilldownTableConfig).put({
             id: 'default',
             version: defaultConfigs.version,
             config: defaultConfigs.config
@@ -100,7 +100,7 @@ const user = {
           const userId = localStorage.getItem(storageKey.userId)
           const oldVersion = await getConfigVersion(userId)
           if (oldVersion !== defaultConfigs.version) {
-            db[dbDrilldownTableConfig].delete(userId)
+            indexedDBUtils.selectTable(dbDrilldownTableConfig).delete(userId)
           }
         }
       })

src/utils/constants.js

@@ -1,6 +1,8 @@
 export const defaultPageSize = 20
 
+// indexedDB库名
 export const dbName = 'cn-db'
+// indexedDB表名
 export const dbGeoDataTableName = 'geodata'
 export const dbDrilldownTableConfig = 'cn-drilldown-table-config'
 export const storageKey = {

src/utils/tools.js

@@ -5,8 +5,7 @@ import { storageKey, iso36112, topDomain, echartsFontSize, dbGeoDataTableName, n
 import { getIso36112JsonData, getDictList } from '@/utils/api'
 import { format } from 'echarts'
 import router from '@/router'
-import { db } from '@/indexedDB'
-import { useRoute } from 'vue-router'
+import indexedDBUtils from '@/indexedDB'
 
 export const tableSort = {
   // 是否需要排序
@@ -488,11 +487,11 @@ export function loadGeoData () {
   keys.push(storageKey.iso36112Capital)
   keys.push(storageKey.iso36112WorldLow)
   keys.forEach(async k => {
-    const queryData = await db[dbGeoDataTableName].get({ name: k })
+    const queryData = await indexedDBUtils.selectTable(dbGeoDataTableName).get({ name: k })
     if (!queryData) {
       const data = await getIso36112JsonData(iso36112[k])
       if (data) {
-        db[dbGeoDataTableName].add({
+        indexedDBUtils.selectTable(dbGeoDataTableName).add({
           name: k,
           geo: data
         })
@@ -505,14 +504,14 @@ export function loadGeoData () {
 *  使用indexedDB缓存地图数据
 *  */
 export async function getGeoData (key) {
-  const data = await db[dbGeoDataTableName].get({ name: key })
+  const data = await indexedDBUtils.selectTable(dbGeoDataTableName).get({ name: key })
   if (data) {
     return data.geo
   } else {
     if (iso36112[key]) {
       const d = await getIso36112JsonData(iso36112[key])
       if (d) {
-        db[dbGeoDataTableName].add({
+        indexedDBUtils.selectTable(dbGeoDataTableName).add({
           name: key,
           geo: d
         })
@@ -937,7 +936,7 @@ export async function getDefaultCurTab (tableType, metric, columnName) {
 export async function readDrilldownTableConfigByUser () {
   // 获取用户定制的自定义配置
   const userId = localStorage.getItem(storageKey.userId)
-  const userLocalConfig = await db[dbDrilldownTableConfig].get({ id: userId })
+  const userLocalConfig = await indexedDBUtils.selectTable(dbDrilldownTableConfig).get({ id: userId })
   let defaultDrillDownTableConfigs = []
   if (userLocalConfig) {
     defaultDrillDownTableConfigs = userLocalConfig.config
@@ -946,15 +945,15 @@ export async function readDrilldownTableConfigByUser () {
 }
 
 export async function getConfigVersion (id) {
-  let defaultConfigInDb = await db[dbDrilldownTableConfig].get({ id: id })
+  let defaultConfigInDb = await indexedDBUtils.selectTable(dbDrilldownTableConfig).get({ id: id })
   if (!defaultConfigInDb) {
-    defaultConfigInDb = await db[dbDrilldownTableConfig].get({ id: 'default' })
+    defaultConfigInDb = await indexedDBUtils.selectTable(dbDrilldownTableConfig).get({ id: 'default' })
   }
   return defaultConfigInDb.version || ''
 }
 
 export async function combineDrilldownTableWithUserConfig () {
-  const defaultConfigInDb = await db[dbDrilldownTableConfig].get({ id: 'default' })
+  const defaultConfigInDb = await indexedDBUtils.selectTable(dbDrilldownTableConfig).get({ id: 'default' })
   const defaultConfigGroup = defaultConfigInDb ? defaultConfigInDb.config : []
   const currentUserConfigGroup = await readDrilldownTableConfigByUser()
   if (defaultConfigGroup && currentUserConfigGroup && currentUserConfigGroup.length > 0) {

src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue

@@ -215,8 +215,8 @@ import unitConvert from '@/utils/unit-convert'
 import { getChainRatio, computeScore, urlParamsHandler, overwriteUrl, readDrilldownTableConfigByUser, combineDrilldownTableWithUserConfig, getDnsMapData, handleSpecialValue, getConfigVersion } from '@/utils/tools'
 import { getSecond } from '@/utils/date-util'
 import chartMixin from '@/views/charts2/chart-mixin'
-import { db } from '@/indexedDB'
 import _ from 'lodash'
+import indexedDBUtils from '@/indexedDB'
 
 export default {
   name: 'NetworkOverviewTabs',
@@ -1729,7 +1729,7 @@ export default {
         version = await getConfigVersion('default')
       }
       // 更新缓存中的配置
-      await db[dbDrilldownTableConfig].put({
+      await indexedDBUtils.selectTable(dbDrilldownTableConfig).put({
         id: this.userId,
         version: version,
         config: this.$_.cloneDeep(curUserConfigGroup)