fix:

- improved handling of command selection by using computed properties to reduce computation
- refactored store to function and updated its usages

src/components/CmdBar.vue

@@ -7,10 +7,12 @@ const { commands } = defineProps<{
   commands: Group[]
 }>()
 
+const { initState } = useCmdBarState()
+
 watch(
   () => commands,
   () => {
-    useCmdBarState?.initState(commands)
+    initState(commands)
   },
   { deep: true, immediate: true }
 )

src/components/CmdBarDialog.vue

@@ -61,7 +61,7 @@ const vClickOutside = {
   }
 }
 
-const { resetState } = useCmdBarState
+const { resetState } = useCmdBarState()
 
 function onDialogOpen() {
   emit('update:visible', true)

src/components/CmdBarFilter.vue

@@ -15,7 +15,8 @@ defineSlots<{
 
 const { lineStyle, setLineStyle } = useIndicator()
 
-const selectedGroups = computed(() => useCmdBarState?.state.selectedGroups)
+const { state, toggleGroup: toggleCmdBarGroup } = useCmdBarState()
+const selectedGroups = computed(() => state.selectedGroups)
 
 const groupSet = ref<Set<FilterOption>>(new Set<FilterOption>())
 const hiddenOptions = ref<FilterOption[]>([])
@@ -53,7 +54,7 @@ function isSelected(group: string | null): boolean {
 }
 
 function toggleGroup(group: string | null) {
-  useCmdBarState?.toggleGroup(group, asCheckbox)
+  toggleCmdBarGroup(group, asCheckbox)
 
   setLineStyle()
 }

src/components/CmdBarInput.vue

@@ -22,7 +22,9 @@ defineSlots<{
   clear(): any
 }>()
 
-const query = computed(() => useCmdBarState?.state.query)
+const { state, updateQuery, clearQuery } = useCmdBarState()
+
+const query = computed(() => state.query)
 
 const options: ComputedRef<Partial<UseFuseOptions<Command>>> = computed(() => {
   return {
@@ -49,15 +51,11 @@ function handleInput(e: Event): void {
     return
   }
   if (inputValue !== null && inputValue !== undefined) {
-    useCmdBarState?.updateQuery(inputValue, options.value)
+    updateQuery(inputValue, options.value)
   }
 
   emitter.emit('input', inputValue)
 }
-
-function clearQuery(): void {
-  useCmdBarState?.clearQuery()
-}
 </script>
 
 <template>

src/components/CmdBarItems.vue

@@ -9,13 +9,14 @@ defineProps<{
 }>()
 
 const { emitter } = useCmdBarEvent()
+const { state, selectCommand, executeCommand } = useCmdBarState()
 
 const isSelectedItem = (command: Command): boolean => {
-  return useCmdBarState.state.selectedCommandKey === command.key
+  return state.selectedCommandKey === command.key
 }
 function handleClick(clickedCommand: Command) {
   emitter.emit('clicked', clickedCommand as Command)
-  useCmdBarState?.executeCommand()
+  executeCommand()
 }
 </script>
 
@@ -27,7 +28,7 @@ function handleClick(clickedCommand: Command) {
     role="option"
     class="item"
     :aria-selected="isSelectedItem(command)"
-    @mousemove="useCmdBarState?.selectCommand(command.key)"
+    @mousemove="selectCommand(command.key)"
     @click="handleClick(command)"
   >
     <slot :command="command" />

src/components/CmdBarList.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import CmdBarItems from './CmdBarItems.vue'
 import { useCmdBarEvent } from '../composables/useCmdBarEvent'
-import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, ref, watch, watchEffect } from 'vue'
 import { Command } from '../types'
 import type { Group } from '../types'
 import { useCmdBarState } from '../composables/useCmdBarState'
@@ -20,15 +20,17 @@ defineSlots<{
   preview(props: { activeCommand: Command | null }): any
 }>()
 
-useCmdBarState.setLoop(loop)
+const { state, setLoop } = useCmdBarState()
+
+setLoop(loop)
 
 const activeCommand = ref<Command | null>(null)
 const listRef = ref<HTMLElement | null>(null)
 
 // Filter groups based on selected groups in the store
 const filteredGroups = computed<Group[]>(() => {
-  const selectedGroups = useCmdBarState?.state.selectedGroups
-  const allGroups = useCmdBarState?.state.groups as Group[]
+  const selectedGroups = state.selectedGroups
+  const allGroups = state.groups as Group[]
 
   // If no group is selected, return all groups
   if (selectedGroups.has(null)) {
@@ -40,18 +42,18 @@ const filteredGroups = computed<Group[]>(() => {
 })
 
 const results = computed(() => {
-  return useCmdBarState?.state.results as Readonly<Command[]>
+  return state.results as Readonly<Command[]>
 })
-const hasQuery = computed(() => useCmdBarState?.state.query !== '')
+const hasQuery = computed(() => state.query !== '')
 
-const isLoading = computed(() => useCmdBarState.state.isLoading)
+const isLoading = computed(() => state.isLoading)
 const showNoResults = computed(
   () => !isLoading.value && results.value.length === 0 && hasQuery.value
 )
 
 /* handle scroll to selected item */
 const getSelectedItem = () => {
-  const selectedId = useCmdBarState?.state.selectedCommandKey
+  const selectedId = state.selectedCommandKey
   return listRef.value?.querySelector(`[data-id="${selectedId}"]`) as HTMLElement
 }
 
@@ -72,7 +74,7 @@ emitter.on('selected', (command: Command) => {
 })
 
 watch(
-  () => useCmdBarState?.state.selectedCommandKey,
+  () => state.selectedCommandKey,
   (newVal) => {
     if (newVal) {
       nextTick(scrollSelectedIntoView)