Vuex Mutation 中如何解决返回创建对象的 ID 难题？

Vuex Mutation 中如何返回创建对象的 ID

问题陈述

在 Vuex 中，无法直接从 Mutation 返回值，因为 Mutation 必须是同步操作，而返回值会导致异步行为。这可能会导致应用程序出现问题，例如在尝试使用新创建对象的 ID 时出现未定义的错误。

解决方法

有两种主要方法可以从 Vuex Mutation 中返回创建对象的 ID：

1. 使用 Action

Action 允许执行异步操作，在这些操作完成并返回结果后，你可以提交 Mutation 来更新状态。

2. 使用 Composition API

Composition API 提供了 useMutation 函数，它允许你在组件内创建可重用的函数，这些函数可以异步调用 Vuex Action 并返回其结果。

代码示例

Action 示例：

const actions = {
  createNewReport({ state, commit }) {
    // 异步创建新报告
    const newReportId = await createReport();

    // 创建新子报告
    const newSubreportId = await createSubreport();

    // 提交 Mutation 以将子报告 ID 添加到报告中
    commit(mutationTypes.ADD_SUBREPORT_TO_REPORT, {
      reportId: newReportId,
      subreportId: newSubreportId,
    });
  },
};

Composition API 示例：

import { useMutation } from 'vuex';
import { ref } from 'vue';

const createReport = useMutation(mutationTypes.CREATE_NEW_REPORT);
const addSubreport = useMutation(mutationTypes.ADD_NEW_SUBREPORT);
const addSubreportToReport = useMutation(mutationTypes.ADD_SUBREPORT_TO_REPORT);

const addNewReport = async () => {
  const newReportId = await createReport();
  const newSubreportId = await addSubreport();
  await addSubreportToReport({ reportId: newReportId, subreportId: newSubreportId });
};

优点和缺点

Action

• 优点： 可以轻松执行异步操作并更新多个状态值。
• 缺点： 需要更多的代码，并且可能使代码更加难以理解。

Composition API

• 优点： 代码更简洁且更易于阅读。
• 缺点： 只有在 Vue 3 中可用，并且可能不适合所有项目。

常见问题解答

1. 为什么无法直接从 Mutation 返回 ID？
   Mutation 必须是同步操作，而返回 ID 会导致异步行为。

2. 哪种方法更好，Action 还是 Composition API？
   这取决于你的项目和偏好。如果需要执行复杂的操作或更新多个状态值，Action 可能是更好的选择。如果需要更简洁和易于阅读的代码，Composition API 可能是更好的选择。

3. 我可以使用 Vuex 的模块来解决此问题吗？
   可以，但是不建议使用，因为模块会使代码更加复杂。

4. 我是否可以手动将 ID 设置为新创建的对象？
   不，因为 Mutation 必须是纯函数，这意味着它们不能改变传递给它们的参数。

5. 是否有替代方法来跟踪新创建对象的 ID？
   可以，例如，你可以在服务器端生成 ID 并将其返回到客户端，或者使用客户端上的唯一 ID 生成器。