refactor: replace some 'watch' with 'watchEffect'
This commit is contained in:
parent
84b73bd5e7
commit
18f1b976c6
|
@ -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) => {
|
|
||||||
if (nav === 'log') {
|
|
||||||
logPaneRef.value?.refresh()
|
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`
|
||||||
|
|
|
@ -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,10 +63,8 @@ const title = computed(() => {
|
||||||
})
|
})
|
||||||
|
|
||||||
const dialogStore = useDialog()
|
const dialogStore = useDialog()
|
||||||
watch(
|
watchEffect(() => {
|
||||||
() => dialogStore.addFieldsDialogVisible,
|
if (dialogStore.addFieldsDialogVisible) {
|
||||||
(visible) => {
|
|
||||||
if (visible) {
|
|
||||||
const { server, db, key, keyCode, type } = dialogStore.addFieldParam
|
const { server, db, key, keyCode, type } = dialogStore.addFieldParam
|
||||||
newForm.server = server
|
newForm.server = server
|
||||||
newForm.db = db
|
newForm.db = db
|
||||||
|
@ -76,8 +74,7 @@ watch(
|
||||||
newForm.opType = 0
|
newForm.opType = 0
|
||||||
newForm.value = null
|
newForm.value = null
|
||||||
}
|
}
|
||||||
},
|
})
|
||||||
)
|
|
||||||
|
|
||||||
const browserStore = useBrowserStore()
|
const browserStore = useBrowserStore()
|
||||||
const tab = useTabStore()
|
const tab = useTabStore()
|
||||||
|
|
|
@ -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,10 +18,9 @@ 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
|
||||||
|
@ -38,8 +37,7 @@ watch(
|
||||||
deleteForm.affectedKeys = []
|
deleteForm.affectedKeys = []
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
})
|
||||||
)
|
|
||||||
|
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const deleting = ref(false)
|
const deleting = ref(false)
|
||||||
|
|
|
@ -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,10 +14,9 @@ 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
|
||||||
|
@ -25,8 +24,7 @@ watch(
|
||||||
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()
|
||||||
|
|
|
@ -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) => {
|
|
||||||
if (visible) {
|
|
||||||
groupForm.name = editGroup.value = dialogStore.editGroup
|
groupForm.name = editGroup.value = dialogStore.editGroup
|
||||||
}
|
}
|
||||||
},
|
})
|
||||||
)
|
|
||||||
|
|
||||||
const i18n = useI18n()
|
const i18n = useI18n()
|
||||||
const onConfirm = async () => {
|
const onConfirm = async () => {
|
||||||
|
|
|
@ -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 = () => {}
|
||||||
|
|
|
@ -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,10 +64,8 @@ const defaultValue = {
|
||||||
}
|
}
|
||||||
|
|
||||||
const dialogStore = useDialog()
|
const dialogStore = useDialog()
|
||||||
watch(
|
watchEffect(() => {
|
||||||
() => dialogStore.newKeyDialogVisible,
|
if (dialogStore.newKeyDialogVisible) {
|
||||||
(visible) => {
|
|
||||||
if (visible) {
|
|
||||||
const { prefix, server, db } = dialogStore.newKeyParam
|
const { prefix, server, db } = dialogStore.newKeyParam
|
||||||
const separator = browserStore.getSeparator(server)
|
const separator = browserStore.getSeparator(server)
|
||||||
newForm.server = server
|
newForm.server = server
|
||||||
|
@ -85,8 +83,7 @@ watch(
|
||||||
newForm.ttl = -1
|
newForm.ttl = -1
|
||||||
newForm.value = null
|
newForm.value = null
|
||||||
}
|
}
|
||||||
},
|
})
|
||||||
)
|
|
||||||
|
|
||||||
const renderTypeLabel = (option) => {
|
const renderTypeLabel = (option) => {
|
||||||
return h(
|
return h(
|
||||||
|
|
|
@ -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 () => {
|
||||||
|
|
|
@ -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,10 +18,8 @@ const dialogStore = useDialog()
|
||||||
const browserStore = useBrowserStore()
|
const browserStore = useBrowserStore()
|
||||||
const tabStore = useTabStore()
|
const tabStore = useTabStore()
|
||||||
|
|
||||||
watch(
|
watchEffect(() => {
|
||||||
() => dialogStore.ttlDialogVisible,
|
if (dialogStore.ttlDialogVisible) {
|
||||||
(visible) => {
|
|
||||||
if (visible) {
|
|
||||||
// get ttl from current tab
|
// get ttl from current tab
|
||||||
const tab = tabStore.currentTab
|
const tab = tabStore.currentTab
|
||||||
if (tab != null) {
|
if (tab != null) {
|
||||||
|
@ -37,8 +35,7 @@ watch(
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
})
|
||||||
)
|
|
||||||
|
|
||||||
const onClose = () => {
|
const onClose = () => {
|
||||||
dialogStore.closeTTLDialog()
|
dialogStore.closeTTLDialog()
|
||||||
|
|
Loading…
Reference in New Issue