refactor: replace some 'watch' with 'watchEffect'

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(
+watchEffect(() => {
-    () => tabStore.nav,
+    if (tabStore.nav === 'log') {
-    (nav) => {
-        if (nav === 'log') {
         logPaneRef.value?.refresh()
     }
-    },
+})
-)
 
 const logoWrapperWidth = computed(() => {
     return `${data.navMenuWidth + prefStore.behavior.asideWidth - 4}px`

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,10 +63,8 @@ const title = computed(() => {
 })
 
 const dialogStore = useDialog()
-watch(
+watchEffect(() => {
-    () => dialogStore.addFieldsDialogVisible,
+    if (dialogStore.addFieldsDialogVisible) {
-    (visible) => {
-        if (visible) {
         const { server, db, key, keyCode, type } = dialogStore.addFieldParam
         newForm.server = server
         newForm.db = db
@@ -76,8 +74,7 @@ watch(
         newForm.opType = 0
         newForm.value = null
     }
-    },
+})
-)
 
 const browserStore = useBrowserStore()
 const tab = useTabStore()

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,10 +18,9 @@ const deleteForm = reactive({
 
 const dialogStore = useDialog()
 const browserStore = useBrowserStore()
-watch(
+
-    () => dialogStore.deleteKeyDialogVisible,
+watchEffect(() => {
-    (visible) => {
+    if (dialogStore.deleteKeyDialogVisible) {
-        if (visible) {
         const { server, db, key } = dialogStore.deleteKeyParam
         deleteForm.server = server
         deleteForm.db = db
@@ -38,8 +37,7 @@ watch(
             deleteForm.affectedKeys = []
         }
     }
-    },
+})
-)
 
 const loading = ref(false)
 const deleting = ref(false)

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,10 +14,9 @@ const flushForm = reactive({
 
 const dialogStore = useDialog()
 const browserStore = useBrowserStore()
-watch(
+
-    () => dialogStore.flushDBDialogVisible,
+watchEffect(() => {
-    (visible) => {
+    if (dialogStore.flushDBDialogVisible) {
-        if (visible) {
         const { server, db } = dialogStore.flushDBParam
         flushForm.server = server
         flushForm.db = db
@@ -25,8 +24,7 @@ watch(
         flushForm.confirm = false
         loading.value = false
     }
-    },
+})
-)
 
 const loading = ref(false)
 const i18n = useI18n()

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(
+watchEffect(() => {
-    () => dialogStore.groupDialogVisible,
+    if (dialogStore.groupDialogVisible) {
-    (visible) => {
-        if (visible) {
         groupForm.name = editGroup.value = dialogStore.editGroup
     }
-    },
+})
-)
 
 const i18n = useI18n()
 const onConfirm = async () => {

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,
+watchEffect(() => {
-    (visible) => {
+    if (dialogStore.keyFilterDialogVisible) {
-        if (visible) {
         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 = () => {}

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,10 +64,8 @@ const defaultValue = {
 }
 
 const dialogStore = useDialog()
-watch(
+watchEffect(() => {
-    () => dialogStore.newKeyDialogVisible,
+    if (dialogStore.newKeyDialogVisible) {
-    (visible) => {
-        if (visible) {
         const { prefix, server, db } = dialogStore.newKeyParam
         const separator = browserStore.getSeparator(server)
         newForm.server = server
@@ -85,8 +83,7 @@ watch(
         newForm.ttl = -1
         newForm.value = null
     }
-    },
+})
-)
 
 const renderTypeLabel = (option) => {
     return h(

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,
+watchEffect(() => {
-    (visible) => {
+    if (dialogStore.renameDialogVisible) {
-        if (visible) {
         const { server, db, key } = dialogStore.renameKeyParam
         renameForm.server = server
         renameForm.db = db
         renameForm.key = key
         renameForm.newKey = key
     }
-    },
+})
-)
 
 const i18n = useI18n()
 const onRename = async () => {

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,10 +18,8 @@ const dialogStore = useDialog()
 const browserStore = useBrowserStore()
 const tabStore = useTabStore()
 
-watch(
+watchEffect(() => {
-    () => dialogStore.ttlDialogVisible,
+    if (dialogStore.ttlDialogVisible) {
-    (visible) => {
-        if (visible) {
         // get ttl from current tab
         const tab = tabStore.currentTab
         if (tab != null) {
@@ -37,8 +35,7 @@ watch(
             }
         }
     }
-    },
+})
-)
 
 const onClose = () => {
     dialogStore.closeTTLDialog()