refactor: replace some 'watch' with 'watchEffect'

This commit is contained in:
Lykin 2024-01-03 10:57:46 +08:00
parent 84b73bd5e7
commit 18f1b976c6
9 changed files with 114 additions and 137 deletions

View File

@ -1,7 +1,7 @@
<script setup> <script setup>
import ContentPane from './components/content/ContentPane.vue' import ContentPane from './components/content/ContentPane.vue'
import BrowserPane from './components/sidebar/BrowserPane.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 { debounce } from 'lodash'
import { useThemeVars } from 'naive-ui' import { useThemeVars } from 'naive-ui'
import Ribbon from './components/sidebar/Ribbon.vue' import Ribbon from './components/sidebar/Ribbon.vue'
@ -43,14 +43,11 @@ const handleResize = () => {
saveSidebarWidth() saveSidebarWidth()
} }
watch( watchEffect(() => {
() => tabStore.nav, if (tabStore.nav === 'log') {
(nav) => { logPaneRef.value?.refresh()
if (nav === 'log') { }
logPaneRef.value?.refresh() })
}
},
)
const logoWrapperWidth = computed(() => { const logoWrapperWidth = computed(() => {
return `${data.navMenuWidth + prefStore.behavior.asideWidth - 4}px` return `${data.navMenuWidth + prefStore.behavior.asideWidth - 4}px`

View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { computed, reactive, watch } from 'vue' import { computed, reactive, watchEffect } from 'vue'
import { types } from '@/consts/support_redis_type.js' import { types } from '@/consts/support_redis_type.js'
import useDialog from 'stores/dialog' import useDialog from 'stores/dialog'
import NewStringValue from '@/components/new_value/NewStringValue.vue' import NewStringValue from '@/components/new_value/NewStringValue.vue'
@ -63,21 +63,18 @@ const title = computed(() => {
}) })
const dialogStore = useDialog() const dialogStore = useDialog()
watch( watchEffect(() => {
() => dialogStore.addFieldsDialogVisible, if (dialogStore.addFieldsDialogVisible) {
(visible) => { const { server, db, key, keyCode, type } = dialogStore.addFieldParam
if (visible) { newForm.server = server
const { server, db, key, keyCode, type } = dialogStore.addFieldParam newForm.db = db
newForm.server = server newForm.key = key
newForm.db = db newForm.keyCode = keyCode
newForm.key = key newForm.type = type
newForm.keyCode = keyCode newForm.opType = 0
newForm.type = type newForm.value = null
newForm.opType = 0 }
newForm.value = null })
}
},
)
const browserStore = useBrowserStore() const browserStore = useBrowserStore()
const tab = useTabStore() const tab = useTabStore()

View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { computed, nextTick, reactive, ref, watch } from 'vue' import { computed, nextTick, reactive, ref, watchEffect } from 'vue'
import useDialog from 'stores/dialog' import useDialog from 'stores/dialog'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { isEmpty, map, size } from 'lodash' import { isEmpty, map, size } from 'lodash'
@ -18,28 +18,26 @@ const deleteForm = reactive({
const dialogStore = useDialog() const dialogStore = useDialog()
const browserStore = useBrowserStore() const browserStore = useBrowserStore()
watch(
() => dialogStore.deleteKeyDialogVisible, watchEffect(() => {
(visible) => { if (dialogStore.deleteKeyDialogVisible) {
if (visible) { const { server, db, key } = dialogStore.deleteKeyParam
const { server, db, key } = dialogStore.deleteKeyParam deleteForm.server = server
deleteForm.server = server deleteForm.db = db
deleteForm.db = db deleteForm.key = key
deleteForm.key = key deleteForm.loadingAffected = false
deleteForm.loadingAffected = false // deleteForm.async = true
// deleteForm.async = true loading.value = false
loading.value = false deleting.value = false
deleting.value = false if (key instanceof Array) {
if (key instanceof Array) { deleteForm.showAffected = true
deleteForm.showAffected = true deleteForm.affectedKeys = key
deleteForm.affectedKeys = key } else {
} else { deleteForm.showAffected = false
deleteForm.showAffected = false deleteForm.affectedKeys = []
deleteForm.affectedKeys = []
}
} }
}, }
) })
const loading = ref(false) const loading = ref(false)
const deleting = ref(false) const deleting = ref(false)

View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { reactive, ref, watch } from 'vue' import { reactive, ref, watchEffect } from 'vue'
import useDialog from 'stores/dialog' import useDialog from 'stores/dialog'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import useBrowserStore from 'stores/browser.js' import useBrowserStore from 'stores/browser.js'
@ -14,19 +14,17 @@ const flushForm = reactive({
const dialogStore = useDialog() const dialogStore = useDialog()
const browserStore = useBrowserStore() const browserStore = useBrowserStore()
watch(
() => dialogStore.flushDBDialogVisible, watchEffect(() => {
(visible) => { if (dialogStore.flushDBDialogVisible) {
if (visible) { const { server, db } = dialogStore.flushDBParam
const { server, db } = dialogStore.flushDBParam flushForm.server = server
flushForm.server = server flushForm.db = db
flushForm.db = db flushForm.async = true
flushForm.async = true flushForm.confirm = false
flushForm.confirm = false loading.value = false
loading.value = false }
} })
},
)
const loading = ref(false) const loading = ref(false)
const i18n = useI18n() const i18n = useI18n()

View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { computed, reactive, ref, watch } from 'vue' import { computed, reactive, ref, watchEffect } from 'vue'
import useDialog from 'stores/dialog' import useDialog from 'stores/dialog'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import useConnectionStore from 'stores/connections.js' import useConnectionStore from 'stores/connections.js'
@ -36,14 +36,11 @@ const isRenameMode = computed(() => !isEmpty(editGroup.value))
const dialogStore = useDialog() const dialogStore = useDialog()
const connectionStore = useConnectionStore() const connectionStore = useConnectionStore()
watch( watchEffect(() => {
() => dialogStore.groupDialogVisible, if (dialogStore.groupDialogVisible) {
(visible) => { groupForm.name = editGroup.value = dialogStore.editGroup
if (visible) { }
groupForm.name = editGroup.value = dialogStore.editGroup })
}
},
)
const i18n = useI18n() const i18n = useI18n()
const onConfirm = async () => { const onConfirm = async () => {

View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { computed, reactive, ref, watch } from 'vue' import { computed, reactive, ref, watchEffect } from 'vue'
import useDialog from 'stores/dialog' import useDialog from 'stores/dialog'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { types } from '@/consts/support_redis_type.js' import { types } from '@/consts/support_redis_type.js'
@ -26,18 +26,16 @@ const typeOptions = computed(() => {
}) })
const dialogStore = useDialog() const dialogStore = useDialog()
watch(
() => dialogStore.keyFilterDialogVisible, watchEffect(() => {
(visible) => { if (dialogStore.keyFilterDialogVisible) {
if (visible) { const { server, db, type, pattern } = dialogStore.keyFilterParam
const { server, db, type, pattern } = dialogStore.keyFilterParam filterForm.server = server
filterForm.server = server filterForm.db = db || 0
filterForm.db = db || 0 filterForm.type = type || ''
filterForm.type = type || '' filterForm.pattern = pattern || '*'
filterForm.pattern = pattern || '*' }
} })
},
)
const browserStore = useBrowserStore() const browserStore = useBrowserStore()
const onConfirm = () => {} const onConfirm = () => {}

View File

@ -1,5 +1,5 @@
<script setup> <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 { types, typesColor } from '@/consts/support_redis_type.js'
import useDialog from 'stores/dialog' import useDialog from 'stores/dialog'
import { endsWith, get, isEmpty, keys, map, trim } from 'lodash' import { endsWith, get, isEmpty, keys, map, trim } from 'lodash'
@ -64,29 +64,26 @@ const defaultValue = {
} }
const dialogStore = useDialog() const dialogStore = useDialog()
watch( watchEffect(() => {
() => dialogStore.newKeyDialogVisible, if (dialogStore.newKeyDialogVisible) {
(visible) => { const { prefix, server, db } = dialogStore.newKeyParam
if (visible) { const separator = browserStore.getSeparator(server)
const { prefix, server, db } = dialogStore.newKeyParam newForm.server = server
const separator = browserStore.getSeparator(server) if (isEmpty(prefix)) {
newForm.server = server newForm.key = ''
if (isEmpty(prefix)) { } else {
newForm.key = '' if (!endsWith(prefix, separator)) {
newForm.key = prefix + separator
} else { } else {
if (!endsWith(prefix, separator)) { newForm.key = prefix
newForm.key = prefix + separator
} else {
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) => { const renderTypeLabel = (option) => {
return h( return h(

View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { reactive, watch } from 'vue' import { reactive, watchEffect } from 'vue'
import useDialog from 'stores/dialog' import useDialog from 'stores/dialog'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import useBrowserStore from 'stores/browser.js' import useBrowserStore from 'stores/browser.js'
@ -15,18 +15,16 @@ const renameForm = reactive({
const dialogStore = useDialog() const dialogStore = useDialog()
const browserStore = useBrowserStore() const browserStore = useBrowserStore()
const tab = useTabStore() const tab = useTabStore()
watch(
() => dialogStore.renameDialogVisible, watchEffect(() => {
(visible) => { if (dialogStore.renameDialogVisible) {
if (visible) { const { server, db, key } = dialogStore.renameKeyParam
const { server, db, key } = dialogStore.renameKeyParam renameForm.server = server
renameForm.server = server renameForm.db = db
renameForm.db = db renameForm.key = key
renameForm.key = key renameForm.newKey = key
renameForm.newKey = key }
} })
},
)
const i18n = useI18n() const i18n = useI18n()
const onRename = async () => { const onRename = async () => {

View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { reactive, watch } from 'vue' import { reactive, watchEffect } from 'vue'
import useDialog from 'stores/dialog' import useDialog from 'stores/dialog'
import useTabStore from 'stores/tab.js' import useTabStore from 'stores/tab.js'
import Binary from '@/components/icons/Binary.vue' import Binary from '@/components/icons/Binary.vue'
@ -18,27 +18,24 @@ const dialogStore = useDialog()
const browserStore = useBrowserStore() const browserStore = useBrowserStore()
const tabStore = useTabStore() const tabStore = useTabStore()
watch( watchEffect(() => {
() => dialogStore.ttlDialogVisible, if (dialogStore.ttlDialogVisible) {
(visible) => { // get ttl from current tab
if (visible) { const tab = tabStore.currentTab
// get ttl from current tab if (tab != null) {
const tab = tabStore.currentTab ttlForm.server = tab.name
if (tab != null) { ttlForm.db = tab.db
ttlForm.server = tab.name ttlForm.key = tab.key
ttlForm.db = tab.db ttlForm.keyCode = tab.keyCode
ttlForm.key = tab.key if (tab.ttl < 0) {
ttlForm.keyCode = tab.keyCode // forever
if (tab.ttl < 0) { ttlForm.ttl = -1
// forever } else {
ttlForm.ttl = -1 ttlForm.ttl = tab.ttl
} else {
ttlForm.ttl = tab.ttl
}
} }
} }
}, }
) })
const onClose = () => { const onClose = () => {
dialogStore.closeTTLDialog() dialogStore.closeTTLDialog()