Question

我已经试图弄清楚这一点了，让我解释一下。

我有大约20个输入字段的大型表格。此表单的功能之一是，您可以通过单击一些按钮来添加更多字段。

下一个显示的代码片段具有一个输入字段和两个按钮：一个用于添加新输入，一个用于删除当前输入字段。

 <div class="input-group">
    <span class="input-group-addon"> {{index}} </span>
    <input type="text" class="form-control" v-model="text">
    <span class="input-group-btn">
      <button class="btn btn-success" title="New Step" v-on:click="addStep">
        <i class="fa fa-plus"></i>
      </button>
    </span>
    <span class="input-group-btn">
      <button class="btn btn-success" title="Remove Step" 
      v-on:click="removeStep">
        <i class="fa fa-remove"></i>
      </button>
    </span>
  </div>

addStep / removeStep操作是在Vue组件中定义的。

在类似的字段组中，单击“添加”按钮将添加2个字段，而不只是一个。

我正在为此寻求一种好的清洁方法，这是我目前的想法：

使用一个组件来保存整个表单。表单状态存储在Vuex商店中，我可以使用获取器和变量来管理状态。这种方法很简单，但是扩展性不好。表单很大，并且有一些重复的代码（例如，需要每种类型的字段的添加/删除功能
使用一个父组件，该父组件的唯一目的是与商店进行通信（处理常规逻辑），并具有一个子组件，该子组件将所有数据作为道具接收。该子组件的目标只是呈现数据。我不确定这是个好主意。我们需要按钮来发出事件以添加新的输入。因此，使用商店的好处已荡然无存。
具有包含子组件的表单组件，该子组件包含可以增长或收缩的所有字段组。这个想法看起来不错，但是现在逻辑已经分散在不同的组件中。好处是每个组件都可以访问商店，因此父组件不知道子组件何时增长。
与3相同，但不要使用存储和事件。父组件中是否有所有状态？

我知道，很难找到“完美”的解决方案，但这是主要问题：

什么尺度更好？什么清洁剂？最佳做法是什么？

我看过很多例子，但是没有一个例子能解决类似问题。我觉得我做错了什么。我的意思是说，解决方案有效，但是看起来很纠结。

Answer 1

尽管Vuex可以帮助我们处理共享状态管理，但它也可以带有更多概念和样板的成本。这是一个权衡在短期和长期生产力之间。

https://vuex.vuejs.org/

如果您可以改用事件，那就去吧。 vuex实际上是基于事件的。

在现代设计中不建议使用

静态存储。仅将vuex用作最后的手段。

Why aren't static methods considered good OO practice?

在Vue和Vuex上使用组件构建大型表单

1 个答案: