Vue Draggable结合Vuex实现Todo拖拽排序与状态更新疑问

嘿，针对你开发拖拽Todo应用遇到的两个问题，结合你的Vuex结构和Vue Draggable的用法，我给你梳理下具体的解决方案：

你当前的计算属性setter会拿到整个数组后提交，但其实我们可以通过给Todo添加排序字段来实现精准更新，避免修改整个数组：

步骤1：给Todo数据新增排序字段 #

首先在你的Todo对象里加一个sortOrder属性，用来记录同状态下的排序优先级：

{ 
  description: "Lorem ipsum dolor sit amet.", 
  createdBy: 'userId', 
  id: 'todoId', 
  refId: 'projectId', 
  status: 'initial',
  sortOrder: 0 // 新增：同状态内的排序值
}

步骤2：修改Getter，按排序值返回列表 #

更新你的三个状态Getter，筛选后按sortOrder升序排列，确保拖拽后的顺序能正确展示：

initTodos(state){
  return (projectId) => {
    return state.todos
      .filter(todo => todo.refId === projectId && todo.status === "initial")
      .sort((a, b) => a.sortOrder - b.sortOrder) // 按排序值排序
  }
}
// wipTodos和doneTodos做同样的修改

步骤3：更新计算属性的Setter，仅修改排序值 #

不再直接提交整个数组，而是遍历新顺序的列表，更新每个Todo的sortOrder：

initTodos: {
  get() {
    return this.$store.getters.initTodos(this.id)
  },
  set(value) {
    // 遍历新列表，给每个Todo分配对应的排序值
    const updatedTodos = value.map((todo, index) => ({
      ...todo,
      sortOrder: index
    }));
    this.$store.commit('updateTodoSortOrders', updatedTodos);
  }
}
// wipTodos和doneTodos的计算属性做同样修改

步骤4：添加Vuex Mutation处理排序更新 #

在Store里新增Mutation，精准更新每个Todo的排序值：

mutations: {
  updateTodoSortOrders(state, updatedTodos) {
    updatedTodos.forEach(updatedTodo => {
      const targetTodo = state.todos.find(t => t.id === updatedTodo.id);
      if (targetTodo) {
        targetTodo.sortOrder = updatedTodo.sortOrder;
      }
    });
  }
}

这样同状态拖拽后，只会更新被拖拽相关Todo的sortOrder，不会改动整个todos数组，性能更优。

跨状态拖拽需要同时处理Todo状态变更和两个列表的排序更新，我们可以利用Vue Draggable的group属性和@change事件来实现：

步骤1：给所有Draggable组件设置相同的Group #

确保三个状态的Draggable属于同一个拖拽组，这样才能跨列表拖拽：

<!-- initial列表 -->
<draggable 
  v-model="initTodos"
  group="todos"
  @change="handleTodoDragChange"
  ref="initDraggable"
  :item-key="todo => todo.id"
>
  <app-todo v-for="todo in initTodos" :key="todo.id" :todo="todo"></app-todo>
</draggable>

<!-- wip列表 -->
<draggable 
  v-model="wipTodos"
  group="todos"
  @change="handleTodoDragChange"
  ref="wipDraggable"
  :item-key="todo => todo.id"
>
  <app-todo v-for="todo in wipTodos" :key="todo.id" :todo="todo"></app-todo>
</draggable>

<!-- done列表 -->
<draggable 
  v-model="doneTodos"
  group="todos"
  @change="handleTodoDragChange"
  ref="doneDraggable"
  :item-key="todo => todo.id"
>
  <app-todo v-for="todo in doneTodos" :key="todo.id" :todo="todo"></app-todo>
</draggable>

步骤2：实现拖拽事件处理方法 #

在Project.vue里定义handleTodoDragChange方法，处理拖入、拖出和同列表拖拽的情况：

methods: {
  handleTodoDragChange(event) {
    const targetStatus = this.getListStatus(event.target);
    // 处理从其他列表拖入当前列表的情况
    if (event.added) {
      const todo = event.added.element;
      // 1. 更新Todo的状态
      this.$store.commit('updateTodoStatus', { 
        todoId: todo.id, 
        newStatus: targetStatus 
      });
      // 2. 更新当前列表的排序
      this.updateListSort(targetStatus);
    }

    // 处理从当前列表拖到其他列表的情况
    if (event.removed) {
      this.updateListSort(targetStatus);
    }

    // 处理同列表拖拽的情况（和之前的逻辑一致）
    if (event.moved) {
      this.updateListSort(targetStatus);
    }
  },

  // 根据拖拽目标判断当前列表的状态
  getListStatus(targetElement) {
    if (targetElement === this.$refs.initDraggable.$el) return 'initial';
    if (targetElement === this.$refs.wipDraggable.$el) return 'wip';
    if (targetElement === this.$refs.doneDraggable.$el) return 'done';
  },

  // 更新指定状态列表的排序值
  updateListSort(status) {
    let currentList;
    switch(status) {
      case 'initial': currentList = this.initTodos; break;
      case 'wip': currentList = this.wipTodos; break;
      case 'done': currentList = this.doneTodos; break;
    }
    const updatedTodos = currentList.map((todo, index) => ({
      ...todo,
      sortOrder: index
    }));
    this.$store.commit('updateTodoSortOrders', updatedTodos);
  }
}

步骤3：添加Vuex Mutation处理状态变更 #

在Store里新增Mutation，修改Todo的status属性：

mutations: {
  // ...之前的updateTodoSortOrders
  updateTodoStatus(state, { todoId, newStatus }) {
    const targetTodo = state.todos.find(t => t.id === todoId);
    if (targetTodo) {
      targetTodo.status = newStatus;
      // 初始化新状态下的排序值（后续会被updateListSort覆盖，也可以省略）
      targetTodo.sortOrder = state.todos.filter(t => t.refId === targetTodo.refId && t.status === newStatus).length;
    }
  }
}

这样跨状态拖拽时，会自动修改Todo的状态，并同步更新源列表和目标列表的排序，确保所有数据和视图保持一致。

内容的提问来源于stack exchange，提问作者tobiasg