Vue3+Pinia+vue-router：如何创建可复用的增改表单组件

我正在开发一个使用Pinia状态管理的Vue3应用，通过REST API实现数据的CRUD操作。此前仅做过小型Vue2项目，这是首次使用Pinia，仍在学习两者的细节。

我从API中管理的资源为Applications，已有组合式函数处理获取所有应用、单个应用或更新选中应用的API请求。不想分别创建UPDATE和CREATE应用的表单组件，希望打造一个能同时处理两种操作的单一表单组件。目前可通过含application_id的路由填充表单数据（编辑现有应用），无application_id时创建新应用，但不确定如何告知表单执行更新而非创建操作。曾考虑根据route.params中是否存在application_id，用v-if渲染不同按钮触发对应方法，但觉得不够高效。以下是我的代码：

// ApplicationStore.js  (pinia store)
import { defineStore } from "pinia";
// Composable for axios API calls
import { getApplications, getApplicationByID, createApplication } from "@/composables/applications";

export const useApplicationStore = defineStore("application", {
  state: () => ({
    applications: [], //list of applications from database
    application: {},  //currently selected application for edit form
    loading: false,
    success: "Successfully Created",
    error: "",
  }),
  getters: {},
  actions: {
    async fetchApplications() {
      this.loading = true;
      this.applications = [];
      const { applications, error } = await getApplications();
      
      this.applications = applications;
      this.error = error;      
      this.loading = false;
    },
    async fetchApplicationByID(id) {
      this.loading = true;
      const { application, error } =  await getApplicationByID(id);
            
      this.application = application;
      this.error = error;
      this.loading = false;
    },
    async createNewApplication() {
      this.loading = true;
      const { application, results, error } = await createApplication(this.application);
      this.application = application;
      this.error = error;
      this.loading = false;

      if (results.status === 201) {
        // show this.success toast message
      }
    }
  }
});

// ApplicationForm.vue
<template>
  <section class="columns">
    <div class="column">
      <div v-if="error" class="notification is-danger">{{ error }}</div>
      <div class="field">
        <label class="label">Name</label>
        <input v-model="application.name" class="input" type="text" />
      </div>
      <div class="field">
        <label class="label">Location</label>
        <input v-model="application.location" class="input" type="text" />
      </div>
      <div class="control">
        <button @click="createNewApplication" class="button">Save</button>
      </div>
    </div>
  </section>
</template>

<script setup>
  import { useRoute } from "vue-router";
  import { useApplicationStore } from "@/stores/ApplicationStore";
  import { storeToRefs } from "pinia";

  const route = useRoute();
  const { applications, application, error } = storeToRefs(useApplicationStore());
  const { createNewApplication } = useApplicationStore();
  
  //checking if there's an id parameter, if so it finds the application from the list in the store
  if (route.params.id) {
    application.value = applications.value.find(app => app.id === Number(route.params.id));
  } else {
    //form is blank
    application.value = {};
    error.value = "";
  }
</script>

我曾考虑用v-if根据Store数据渲染按钮：

<button v-if="route.params.id" @click="updateApplication" class="button">Update</button>
<button v-else @click="createNewApplication" class="button">Save</button>

但觉得应有更好的处理方式，这是首个大型Vue/Pinia应用，希望找到高效实现方案。

1. 完善Pinia Store的通用提交逻辑 #

首先在Pinia Store中添加更新应用的action，并封装一个自动判断创建/更新的通用提交方法，把操作判断逻辑内聚到状态管理层：

// ApplicationStore.js 新增/修改部分
import { getApplications, getApplicationByID, createApplication, updateApplication } from "@/composables/applications"; // 引入更新API

export const useApplicationStore = defineStore("application", {
  // 原有state、getters保持不变
  actions: {
    // 原有action保持不变
    async updateExistingApplication() {
      this.loading = true;
      const { application, results, error } = await updateApplication(this.application.id, this.application);
      this.application = application;
      this.error = error;
      this.loading = false;

      if (results.status === 200) {
        this.success = "Successfully Updated";
        // 这里可以添加更新成功的提示逻辑
      }
    },
    // 封装通用提交方法，自动判断操作类型
    async submitApplication() {
      if (this.application.id) {
        await this.updateExistingApplication();
      } else {
        await this.createNewApplication();
      }
    }
  }
});

2. 简化表单组件逻辑 #

修改表单组件，移除路由直接依赖，使用watch监听路由变化来初始化表单，并调用通用提交方法，按钮文本根据数据状态动态切换：

// ApplicationForm.vue 修改后的代码
<template>
  <section class="columns">
    <div class="column">
      <div v-if="error" class="notification is-danger">{{ error }}</div>
      <div class="field">
        <label class="label">Name</label>
        <input v-model="application.name" class="input" type="text" />
      </div>
      <div class="field">
        <label class="label">Location</label>
        <input v-model="application.location" class="input" type="text" />
      </div>
      <div class="control">
        <!-- 统一按钮，根据数据状态自动切换文本和操作 -->
        <button @click="submitApplication" class="button" :disabled="loading">
          {{ application.id ? 'Update' : 'Save' }}
        </button>
      </div>
    </div>
  </section>
</template>

<script setup>
import { useRoute, watch } from "vue-router";
import { useApplicationStore } from "@/stores/ApplicationStore";
import { storeToRefs } from "pinia";

const route = useRoute();
const store = useApplicationStore();
const { application, error, loading } = storeToRefs(store);
const { submitApplication, fetchApplicationByID } = store;

// 监听路由参数变化，动态加载或重置表单
watch(
  () => route.params.id,
  async (newId) => {
    if (newId) {
      // 调用Store的action获取单条数据，避免直接从列表查找的潜在问题
      await fetchApplicationByID(Number(newId));
    } else {
      // 重置表单为空白状态
      application.value = {};
      error.value = "";
    }
  },
  { immediate: true } // 初始化时立即执行
);
</script>

3. 方案优势 #

• 职责单一：表单组件只负责渲染和触发提交，操作判断逻辑交给Pinia Store，符合关注点分离原则
• 解耦路由依赖：不再直接用路由参数判断操作类型，而是通过Store中的application.id判断，逻辑更可靠
• 代码简洁：仅需一个按钮，通过数据状态动态调整文本和行为，减少冗余代码
• 鲁棒性提升：使用watch监听路由变化，调用Store的API获取数据，避免了直接从列表查找时可能出现的列表未加载、数据不一致等问题

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