编辑存储在 Vuex 中并映射为计算计算属性的数据的表单

Question

我有一个用于客户注册和编辑的表单组件。创建表单组件时，我首先检查 URL 是否有 ID 以确定要显示的表单类型。如果表单没有 ID（意味着注册新客户）所有字段都应该为空。如果 URL 有 ID，那么我通过 Axios 请求加载客户端信息，然后将数据存储在 Vuex 中并在字段中显示数据以供修改。

     <Form enctype="multipart/form-data" @submit="$emit('submit')">
         <validation-provider
                     name="Compnay name"
                          >
                      <v-text-field
                      v-model="details.company_name"
                              label="Compnay name"
                            />
                  <span class="text-sm text-red-500">{{ errors[0] }}</span>
          </validation-provider>
     <validation-provider
                     name="Compnay name"
                          >
                      <v-text-field
                      v-model="details.email"
                              label="Compnay email"
                            />
                  <span class="text-sm text-red-500">{{ errors[0] }}</span>
          </validation-provider>
     <validation-provider
                     name="Compnay phone"
                          >
                      <v-text-field
                      v-model="details.phone"
                              label="Compnay name"
                            />
                  <span class="text-sm text-red-500">{{ errors[0] }}</span>
          </validation-provider>
        ...

然后我在这里设置数据属性

    data: function () {
        return {
          details: {
            type: Object,
            default: () => ({})
    
          },

在create 我做了await this.$store.dispatch("clients/getClientById", { id: id}) 来获取客户信息

我面临的挑战是在我从 computed 获取客户端后，我找不到将它们添加到 v-model 以使用 FormData 发送它们或编辑它们的方法.请有人指导我。

我试图这样做。但是当我在字段中输入内容时，我收到了一个错误提示 Error: [vuex] do not mutate vuex store state outside mutation handlers.

    async getClientById(id){
          await this.$store.dispatch("clients/getClientById", {
            id: id})
            .then(res => {
            if (res.status === 200 ){
              let clientData = res.data.data
              this.details = clientData
              this.status = clientData.status
            }
          })

Answer 1

第一

您的“最后一次尝试”不起作用，因为对象是 Passed by Reference in JS 所以 this.details 最终指向 Vuex 状态内的对象，并直接在突变之外更改 Vuex 内的数据（通过 v-model 在此case) 在严格模式下被禁止（这是好事）

您可以通过制作对象的副本来修复它（仅当成员是简单值时才有效，而不是对象，因为传播运算符只做浅拷贝）即：

if (res.status === 200 ){
          let clientData = { ...res.data.data }
          this.details = clientData
          this.status = clientData.status
        }

在表单上

在大多数创建/编辑表单中，您需要一些功能：

1. 表单具有保存/取消按钮，因此用户可以选择“通过单击撤消所有更改”
2. 验证 - 仅当输入的数据有效时才允许“保存”操作

恕我直言，最好的方法是制作表单，以便首先将所有数据从 Vuex 复制到表单组件的本地 data 中，并且所有输入都绑定到本地数据。这有很多好处：

1. 当用户键入内容时，只有本地数据发生变化，而 Vuex 中的原始数据完好无损。实现“取消”按钮就像简单地关闭表单（并丢弃所有本地数据）一样简单。

2. 实现“保存”也很容易 - 只需检查所有验证是否通过，然后使用突变将 commit 更改的数据放入 Vuex 存储中

3. 如果正在编辑的数据（存储在 Vuex 中）在您的应用程序的多个地方使用，其他“地方”（组件）不会“看到”在编辑期间可能无效的中间数据（例如，您有两个数字在商店 - A 和 B. 为他们和其他显示A/B 结果的组件编辑表单。如果编辑表单直接绑定到 Vuex 数据并且用户将 B 更改为 0，表单显示验证错误，但您的显示组件仍然看到商店中的 0 并引发错误）

4. 表单组件代码更简单，因为绑定到本地反应数据比binding form controls directly to Vuex容易得多