From 18f1b976c6ca5b19826b08b0e12dfc1167d7d2c2 Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Wed, 3 Jan 2024 10:57:46 +0800
Subject: [PATCH] refactor: replace some 'watch' with 'watchEffect'

---
 frontend/src/AppContent.vue                   | 15 +++----
 .../components/dialogs/AddFieldsDialog.vue    | 29 ++++++-------
 .../components/dialogs/DeleteKeyDialog.vue    | 42 +++++++++----------
 .../src/components/dialogs/FlushDbDialog.vue  | 26 ++++++------
 .../src/components/dialogs/GroupDialog.vue    | 15 +++----
 .../components/dialogs/KeyFilterDialog.vue    | 24 +++++------
 .../src/components/dialogs/NewKeyDialog.vue   | 39 ++++++++---------
 .../components/dialogs/RenameKeyDialog.vue    | 24 +++++------
 .../src/components/dialogs/SetTtlDialog.vue   | 37 ++++++++--------
 9 files changed, 114 insertions(+), 137 deletions(-)

diff --git a/frontend/src/AppContent.vue b/frontend/src/AppContent.vue
index 1f7faf9..83e75dd 100644
--- a/frontend/src/AppContent.vue
+++ b/frontend/src/AppContent.vue
@@ -1,7 +1,7 @@
 <script setup>
 import ContentPane from './components/content/ContentPane.vue'
 import BrowserPane from './components/sidebar/BrowserPane.vue'
-import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { computed, onMounted, reactive, ref, watchEffect } from 'vue'
 import { debounce } from 'lodash'
 import { useThemeVars } from 'naive-ui'
 import Ribbon from './components/sidebar/Ribbon.vue'
@@ -43,14 +43,11 @@ const handleResize = () => {
     saveSidebarWidth()
 }
 
-watch(
-    () => tabStore.nav,
-    (nav) => {
-        if (nav === 'log') {
-            logPaneRef.value?.refresh()
-        }
-    },
-)
+watchEffect(() => {
+    if (tabStore.nav === 'log') {
+        logPaneRef.value?.refresh()
+    }
+})
 
 const logoWrapperWidth = computed(() => {
     return `${data.navMenuWidth + prefStore.behavior.asideWidth - 4}px`
diff --git a/frontend/src/components/dialogs/AddFieldsDialog.vue b/frontend/src/components/dialogs/AddFieldsDialog.vue
index 76616ed..56665e2 100644
--- a/frontend/src/components/dialogs/AddFieldsDialog.vue
+++ b/frontend/src/components/dialogs/AddFieldsDialog.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, reactive, watch } from 'vue'
+import { computed, reactive, watchEffect } from 'vue'
 import { types } from '@/consts/support_redis_type.js'
 import useDialog from 'stores/dialog'
 import NewStringValue from '@/components/new_value/NewStringValue.vue'
@@ -63,21 +63,18 @@ const title = computed(() => {
 })
 
 const dialogStore = useDialog()
-watch(
-    () => dialogStore.addFieldsDialogVisible,
-    (visible) => {
-        if (visible) {
-            const { server, db, key, keyCode, type } = dialogStore.addFieldParam
-            newForm.server = server
-            newForm.db = db
-            newForm.key = key
-            newForm.keyCode = keyCode
-            newForm.type = type
-            newForm.opType = 0
-            newForm.value = null
-        }
-    },
-)
+watchEffect(() => {
+    if (dialogStore.addFieldsDialogVisible) {
+        const { server, db, key, keyCode, type } = dialogStore.addFieldParam
+        newForm.server = server
+        newForm.db = db
+        newForm.key = key
+        newForm.keyCode = keyCode
+        newForm.type = type
+        newForm.opType = 0
+        newForm.value = null
+    }
+})
 
 const browserStore = useBrowserStore()
 const tab = useTabStore()
diff --git a/frontend/src/components/dialogs/DeleteKeyDialog.vue b/frontend/src/components/dialogs/DeleteKeyDialog.vue
index 9c04cf9..dec4978 100644
--- a/frontend/src/components/dialogs/DeleteKeyDialog.vue
+++ b/frontend/src/components/dialogs/DeleteKeyDialog.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, nextTick, reactive, ref, watch } from 'vue'
+import { computed, nextTick, reactive, ref, watchEffect } from 'vue'
 import useDialog from 'stores/dialog'
 import { useI18n } from 'vue-i18n'
 import { isEmpty, map, size } from 'lodash'
@@ -18,28 +18,26 @@ const deleteForm = reactive({
 
 const dialogStore = useDialog()
 const browserStore = useBrowserStore()
-watch(
-    () => dialogStore.deleteKeyDialogVisible,
-    (visible) => {
-        if (visible) {
-            const { server, db, key } = dialogStore.deleteKeyParam
-            deleteForm.server = server
-            deleteForm.db = db
-            deleteForm.key = key
-            deleteForm.loadingAffected = false
-            // deleteForm.async = true
-            loading.value = false
-            deleting.value = false
-            if (key instanceof Array) {
-                deleteForm.showAffected = true
-                deleteForm.affectedKeys = key
-            } else {
-                deleteForm.showAffected = false
-                deleteForm.affectedKeys = []
-            }
+
+watchEffect(() => {
+    if (dialogStore.deleteKeyDialogVisible) {
+        const { server, db, key } = dialogStore.deleteKeyParam
+        deleteForm.server = server
+        deleteForm.db = db
+        deleteForm.key = key
+        deleteForm.loadingAffected = false
+        // deleteForm.async = true
+        loading.value = false
+        deleting.value = false
+        if (key instanceof Array) {
+            deleteForm.showAffected = true
+            deleteForm.affectedKeys = key
+        } else {
+            deleteForm.showAffected = false
+            deleteForm.affectedKeys = []
         }
-    },
-)
+    }
+})
 
 const loading = ref(false)
 const deleting = ref(false)
diff --git a/frontend/src/components/dialogs/FlushDbDialog.vue b/frontend/src/components/dialogs/FlushDbDialog.vue
index 913b5a7..33e2927 100644
--- a/frontend/src/components/dialogs/FlushDbDialog.vue
+++ b/frontend/src/components/dialogs/FlushDbDialog.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, ref, watch } from 'vue'
+import { reactive, ref, watchEffect } from 'vue'
 import useDialog from 'stores/dialog'
 import { useI18n } from 'vue-i18n'
 import useBrowserStore from 'stores/browser.js'
@@ -14,19 +14,17 @@ const flushForm = reactive({
 
 const dialogStore = useDialog()
 const browserStore = useBrowserStore()
-watch(
-    () => dialogStore.flushDBDialogVisible,
-    (visible) => {
-        if (visible) {
-            const { server, db } = dialogStore.flushDBParam
-            flushForm.server = server
-            flushForm.db = db
-            flushForm.async = true
-            flushForm.confirm = false
-            loading.value = false
-        }
-    },
-)
+
+watchEffect(() => {
+    if (dialogStore.flushDBDialogVisible) {
+        const { server, db } = dialogStore.flushDBParam
+        flushForm.server = server
+        flushForm.db = db
+        flushForm.async = true
+        flushForm.confirm = false
+        loading.value = false
+    }
+})
 
 const loading = ref(false)
 const i18n = useI18n()
diff --git a/frontend/src/components/dialogs/GroupDialog.vue b/frontend/src/components/dialogs/GroupDialog.vue
index 08de295..a3a6fcd 100644
--- a/frontend/src/components/dialogs/GroupDialog.vue
+++ b/frontend/src/components/dialogs/GroupDialog.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, reactive, ref, watchEffect } from 'vue'
 import useDialog from 'stores/dialog'
 import { useI18n } from 'vue-i18n'
 import useConnectionStore from 'stores/connections.js'
@@ -36,14 +36,11 @@ const isRenameMode = computed(() => !isEmpty(editGroup.value))
 
 const dialogStore = useDialog()
 const connectionStore = useConnectionStore()
-watch(
-    () => dialogStore.groupDialogVisible,
-    (visible) => {
-        if (visible) {
-            groupForm.name = editGroup.value = dialogStore.editGroup
-        }
-    },
-)
+watchEffect(() => {
+    if (dialogStore.groupDialogVisible) {
+        groupForm.name = editGroup.value = dialogStore.editGroup
+    }
+})
 
 const i18n = useI18n()
 const onConfirm = async () => {
diff --git a/frontend/src/components/dialogs/KeyFilterDialog.vue b/frontend/src/components/dialogs/KeyFilterDialog.vue
index 38b4f76..9321253 100644
--- a/frontend/src/components/dialogs/KeyFilterDialog.vue
+++ b/frontend/src/components/dialogs/KeyFilterDialog.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, reactive, ref, watchEffect } from 'vue'
 import useDialog from 'stores/dialog'
 import { useI18n } from 'vue-i18n'
 import { types } from '@/consts/support_redis_type.js'
@@ -26,18 +26,16 @@ const typeOptions = computed(() => {
 })
 
 const dialogStore = useDialog()
-watch(
-    () => dialogStore.keyFilterDialogVisible,
-    (visible) => {
-        if (visible) {
-            const { server, db, type, pattern } = dialogStore.keyFilterParam
-            filterForm.server = server
-            filterForm.db = db || 0
-            filterForm.type = type || ''
-            filterForm.pattern = pattern || '*'
-        }
-    },
-)
+
+watchEffect(() => {
+    if (dialogStore.keyFilterDialogVisible) {
+        const { server, db, type, pattern } = dialogStore.keyFilterParam
+        filterForm.server = server
+        filterForm.db = db || 0
+        filterForm.type = type || ''
+        filterForm.pattern = pattern || '*'
+    }
+})
 
 const browserStore = useBrowserStore()
 const onConfirm = () => {}
diff --git a/frontend/src/components/dialogs/NewKeyDialog.vue b/frontend/src/components/dialogs/NewKeyDialog.vue
index c5ae2dd..b3a0b38 100644
--- a/frontend/src/components/dialogs/NewKeyDialog.vue
+++ b/frontend/src/components/dialogs/NewKeyDialog.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, h, nextTick, reactive, ref, watch } from 'vue'
+import { computed, h, nextTick, reactive, ref, watchEffect } from 'vue'
 import { types, typesColor } from '@/consts/support_redis_type.js'
 import useDialog from 'stores/dialog'
 import { endsWith, get, isEmpty, keys, map, trim } from 'lodash'
@@ -64,29 +64,26 @@ const defaultValue = {
 }
 
 const dialogStore = useDialog()
-watch(
-    () => dialogStore.newKeyDialogVisible,
-    (visible) => {
-        if (visible) {
-            const { prefix, server, db } = dialogStore.newKeyParam
-            const separator = browserStore.getSeparator(server)
-            newForm.server = server
-            if (isEmpty(prefix)) {
-                newForm.key = ''
+watchEffect(() => {
+    if (dialogStore.newKeyDialogVisible) {
+        const { prefix, server, db } = dialogStore.newKeyParam
+        const separator = browserStore.getSeparator(server)
+        newForm.server = server
+        if (isEmpty(prefix)) {
+            newForm.key = ''
+        } else {
+            if (!endsWith(prefix, separator)) {
+                newForm.key = prefix + separator
             } else {
-                if (!endsWith(prefix, separator)) {
-                    newForm.key = prefix + separator
-                } else {
-                    newForm.key = prefix
-                }
+                newForm.key = prefix
             }
-            newForm.db = db
-            newForm.type = options.value[0].value
-            newForm.ttl = -1
-            newForm.value = null
         }
-    },
-)
+        newForm.db = db
+        newForm.type = options.value[0].value
+        newForm.ttl = -1
+        newForm.value = null
+    }
+})
 
 const renderTypeLabel = (option) => {
     return h(
diff --git a/frontend/src/components/dialogs/RenameKeyDialog.vue b/frontend/src/components/dialogs/RenameKeyDialog.vue
index a9f2835..67e38e5 100644
--- a/frontend/src/components/dialogs/RenameKeyDialog.vue
+++ b/frontend/src/components/dialogs/RenameKeyDialog.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, watch } from 'vue'
+import { reactive, watchEffect } from 'vue'
 import useDialog from 'stores/dialog'
 import { useI18n } from 'vue-i18n'
 import useBrowserStore from 'stores/browser.js'
@@ -15,18 +15,16 @@ const renameForm = reactive({
 const dialogStore = useDialog()
 const browserStore = useBrowserStore()
 const tab = useTabStore()
-watch(
-    () => dialogStore.renameDialogVisible,
-    (visible) => {
-        if (visible) {
-            const { server, db, key } = dialogStore.renameKeyParam
-            renameForm.server = server
-            renameForm.db = db
-            renameForm.key = key
-            renameForm.newKey = key
-        }
-    },
-)
+
+watchEffect(() => {
+    if (dialogStore.renameDialogVisible) {
+        const { server, db, key } = dialogStore.renameKeyParam
+        renameForm.server = server
+        renameForm.db = db
+        renameForm.key = key
+        renameForm.newKey = key
+    }
+})
 
 const i18n = useI18n()
 const onRename = async () => {
diff --git a/frontend/src/components/dialogs/SetTtlDialog.vue b/frontend/src/components/dialogs/SetTtlDialog.vue
index 1444771..37470bc 100644
--- a/frontend/src/components/dialogs/SetTtlDialog.vue
+++ b/frontend/src/components/dialogs/SetTtlDialog.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, watch } from 'vue'
+import { reactive, watchEffect } from 'vue'
 import useDialog from 'stores/dialog'
 import useTabStore from 'stores/tab.js'
 import Binary from '@/components/icons/Binary.vue'
@@ -18,27 +18,24 @@ const dialogStore = useDialog()
 const browserStore = useBrowserStore()
 const tabStore = useTabStore()
 
-watch(
-    () => dialogStore.ttlDialogVisible,
-    (visible) => {
-        if (visible) {
-            // get ttl from current tab
-            const tab = tabStore.currentTab
-            if (tab != null) {
-                ttlForm.server = tab.name
-                ttlForm.db = tab.db
-                ttlForm.key = tab.key
-                ttlForm.keyCode = tab.keyCode
-                if (tab.ttl < 0) {
-                    // forever
-                    ttlForm.ttl = -1
-                } else {
-                    ttlForm.ttl = tab.ttl
-                }
+watchEffect(() => {
+    if (dialogStore.ttlDialogVisible) {
+        // get ttl from current tab
+        const tab = tabStore.currentTab
+        if (tab != null) {
+            ttlForm.server = tab.name
+            ttlForm.db = tab.db
+            ttlForm.key = tab.key
+            ttlForm.keyCode = tab.keyCode
+            if (tab.ttl < 0) {
+                // forever
+                ttlForm.ttl = -1
+            } else {
+                ttlForm.ttl = tab.ttl
             }
         }
-    },
-)
+    }
+})
 
 const onClose = () => {
     dialogStore.closeTTLDialog()