Vue 3组合式API中如何结合自定义Composable与Store动作？

核心问题 #

自定义useCollapse Composable后，无法将Store的异步保存动作addItem与折叠面板的状态控制逻辑正确结合，点击保存按钮后无法正常完成保存并关闭折叠面板。

问题根源 #

1. Bootstrap Collapse实例重复创建：每次调用panelState都新建Collapse实例，会导致DOM状态混乱。
2. 异步操作未同步：addItem是异步函数，直接同步调用折叠逻辑和保存动作会导致状态更新与保存流程不同步。
3. 状态与DOM未双向联动：Composable中的showAdd/showEdit与Bootstrap Collapse的实际显示状态未绑定，易出现状态不一致。

修复步骤 #

1. 重构useCollapse Composable #

优化DOM操作，复用Collapse实例，同时支持异步回调：

import { ref, onMounted, onUnmounted } from 'vue'
import { Collapse } from 'bootstrap'

export function useCollapse(id) {
  const showEdit = ref(false)
  const showAdd = ref(false)
  let collapseInstance = null

  // 初始化Collapse实例
  onMounted(() => {
    const collapsePanel = document.querySelector(id)
    if (collapsePanel) {
      collapseInstance = new Collapse(collapsePanel, {
        toggle: false // 初始不触发切换
      })
    }
  })

  // 销毁实例避免内存泄漏
  onUnmounted(() => {
    if (collapseInstance) {
      collapseInstance.dispose()
    }
  })

  // 同步状态与Collapse实例
  const syncPanelState = () => {
    if (!collapseInstance) return
    const shouldShow = showEdit.value || showAdd.value
    if (shouldShow && !collapseInstance._isShown) {
      collapseInstance.show()
    } else if (!shouldShow && collapseInstance._isShown) {
      collapseInstance.hide()
    }
  }

  const isEditClicked = () => {
    showEdit.value = !showEdit.value
    showAdd.value = false // 切换编辑时关闭新增面板
    syncPanelState()
  }

  const isAddClicked = () => {
    showAdd.value = !showAdd.value
    showEdit.value = false // 切换新增时关闭编辑面板
    syncPanelState()
  }

  // 支持传入保存回调，完成后关闭面板
  const handleSave = async (saveCallback) => {
    try {
      await saveCallback() // 等待保存完成
      showAdd.value = false
      showEdit.value = false
      syncPanelState()
    } catch (err) {
      console.error('保存失败:', err)
      // 保存失败可保留面板状态，方便用户修改
    }
  }

  return { showEdit, showAdd, isEditClicked, isAddClicked, handleSave }
}

2. 组件中结合保存与折叠逻辑 #

修改组件代码，利用handleSave处理异步保存：

<Button content="Save" variant="btn-primary" @click="handleSaveAction" />

<script setup>
import { useCollapse } from './collapse.js'
import { useStore } from 'vuex'
const store = useStore()
const newItem = ref('')
const newItemPlotNumber = ref(false)

const { showEdit, showAdd, isEditClicked, isAddClicked, handleSave } = useCollapse('#libraryPanel')

// 定义保存动作回调
const handleSaveAction = () => {
  handleSave(async () => {
    await store.dispatch('addItem', {
      name: newItem.value,
      plotNumberEnabled: newItemPlotNumber.value
    })
    // 保存成功后重置表单
    newItem.value = ''
    newItemPlotNumber.value = false
  })
}
</script>

3. 优化Store的addItem方法（可选） #

确保addItem正确返回Promise，方便组件捕获状态：

async addItem({ commit }, { name, plotNumberEnabled }) {
  commit('SET_LOADING', true)
  try {
    const response = await apiClient.post('/items', { name, plotNumberEnabled })
    commit('ADD_ITEM', response.data)
    commit('SET_LOADING', false)
    return response.data
  } catch (err) {
    commit('SET_LOADING', false)
    throw err // 抛出错误让组件处理
  }
}

关键改进点 #

• 复用Bootstrap Collapse实例，避免DOM状态混乱
• 通过异步回调确保保存动作完成后再更新面板状态
• 联动showAdd/showEdit与Collapse实例的实际显示状态
• 增加错误处理，保存失败时可保留面板状态方便用户修改

内容的提问来源于stack exchange，提问作者R-b-n