提交多个组件的值

问题描述 投票：0回答：1

我使用的是 vuejs-向导 为了创建注册页面，我在组件中的每个标签都是这样的。

<form-wizard color="#fcab1a" title="" subtitle="" finish-button-text="Register">
  <tab-content title="Personal Info" icon="icon-location3 fa-2x">
    <personal-info></personal-info>
  </tab-content>
  <tab-content title="Contact Info" icon="icon-box fa-2x">
    <contact-info></contact-info>
  </tab-content>
  <tab-content title="Address" icon="icon-alarm fa-2x">
    <address></address>
  </tab-content>
</form-wizard>

个人信息。

<template>
  <div class="card">
    <div class="card-header">
      <h5 class="card-title">Personal Info</h5>
    </div>
    <div class="card-body">
      <div class="form-group">
        <div class="row">
          <div class="col-md-6">
            <label>Full Name <span class="text-danger">*</span></label>
            <input type="text" value="" class="form-control" v-model="name" />
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="row">
          <div class="col-md-6">
            <label>Age <span class="text-danger">*</span></label>
            <input type="number" value="" class="form-control" v-model="age" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

联系信息:

<template>
  <div class="card">
    <div class="card-header">
      <h5 class="card-title">Contact Info</h5>
    </div>
    <div class="card-body">
      <div class="form-group">
        <div class="row">
          <div class="col-md-6">
            <label>Mobile <span class="text-danger">*</span></label>
            <input type="text" value="" class="form-control" v-model="mobile" />
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="row">
          <div class="col-md-6">
            <label>Email <span class="text-danger">*</span></label>
            <input
              type="number"
              value=""
              class="form-control"
              v-model="email"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

我的问题是，提交表格的最佳方式是什么，我需要vuex来存储状态，还是有更好的方式？

我的问题是，我需要vuex来存储状态，还是有更好的方法？

vue.js vuejs2 vuex
1个回答
0
投票

这要看...

答案取决于各种因素。例如，你是否已经使用了Vuex，应用程序的大小，应用程序的可测试性，甚至是字段是如何被验证的（异步验证）。

当它是一个简单的应用程序，而且我只有直接的父=>子关系时，我倾向于跳过添加Vuex作为依赖关系。但我主要是处理SPA，所以我通常会使用它）YMMV。

在这种情况下，这就需要在父类中定义字段。然后为每个值添加道具和发射器到子代，并在父代上添加一个监听器。不过当你开始添加更多的字段时，你可能会发现这很乏味，于是选择在对象中以组或整体的方式传递字段（只在tab中选择你需要的字段），然后你可以实现你自己的 v-model 中的标签组件，这可以使它很容易地将对象传递到周围

如果您使用的是最新的Vue版本(2.6+)，您可以使用vue.observable在多个组件之间共享一个存储，而不需要Vuex的钟声。

有一个 好文章 其中展示了如何用它来创建一个vuex克隆，但实际上要创建一个符合你需求的商店要比这简单得多。如果你对如何实现它感兴趣，请在评论中告诉我，我可以描述它。

滚动与自定义商店

其实就这么简单

创建一个 store.js 文件中加入...

import Vue from 'vue';

const store = Vue.observable({
  name: null,
  email: null,
  age: null,
  mobile: null,
});

export default store;

然后在任何你想访问它的组件中，在创建过程中添加存储。

import store from "../store";

export default {
  name: "PersonalInfo",
  created() {
    this.$store = store;
  }
};

现在，所有的商店都可以在模板中使用，通过 $store

<input type="text" value class="form-control" v-model="$store.name">

代码和盒子的例子

你失去了Vuex提供的好处，比如在突变上的 "时间旅行"。因为你没有处理通量模式(vuex)所要处理的规模，所以我会在这种规模的应用中使用这种解决方案。

0
投票

雅你应该只用vuex，它结合了像数据，这样就不会分散在多个文件中。如果你要把这些信息发回你的后端，它使大多数后端连接在一个地方更容易.没有向导的事情，我用这样的商店重新做了你的代码。注意计算属性而不是使用数据。通过做为一个计算属性，你不必写任何代码来改变存储在商店里面的变量。

Personal.vue

<template>
  <div class="card">
    <div class="card-header">
      <h5 class="card-title">Personal Info</h5>
    </div>
    <div class="card-body">
      <div class="form-group">
        <div class="row">
          <div class="col-md-6">
            <label>Full Name <span class="text-danger">*</span></label>
            <input
              type="text"
              value=""
              class="form-control"
              v-model="register.name"
            />
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="row">
          <div class="col-md-6">
            <label>Age <span class="text-danger">*</span></label>
            <input
              type="number"
              value=""
              class="form-control"
              v-model="register.age"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    register() {
      return this.$store.state.register;
    },
  },
};
</script>

联系我们

<template>
  <div class="card">
    <div class="card-header">
      <h5 class="card-title">Contact Info</h5>
    </div>
    <div class="card-body">
      <div class="form-group">
        <div class="row">
          <div class="col-md-6">
            <label>Mobile <span class="text-danger">*</span></label>
            <input
              type="text"
              value=""
              class="form-control"
              v-model="register.mobile"
            />
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="row">
          <div class="col-md-6">
            <label>Email <span class="text-danger">*</span></label>
            <input
              type="number"
              value=""
              class="form-control"
              v-model="register.email"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    register() {
      return this.$store.state.register;
    },
  },
  methods: {
    submit() {
      this.$store.dispatch("register", {
        person: this.register,
      });
    },
  },
};
</script>

<style></style>

storeindex.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    register: {},
  },
  actions: {
    // register({commit}, data){
    //put in some stuff here.
    //},
  },
});

如果你决定走store路线，你所要做的就是1.npm安装vuex2.在你的src文件夹里面添加一个名为store的文件夹3.添加一个名为index.js的文件4.进入main.js并添加这行 "import store from ".store"; "5.在说new "Vue({"的地方添加 "store "这将注册它。

Vuex是超级简单的，当你的项目变得更大时，它让生活变得更加简单。

0
投票

.sync修改器为道具提供了双向绑定的模式，你可以在这里阅读一下。https:/vuejs.orgv2guidecomponents-custom-events.html#sync-Modifier。.

在父组件中，你可以这样使用.sync修饰符。

<ChildComponent :name.sync="parentNameProperty" />
...
data: () => ({ parentNameProperty: '' }),
...

然后在子组件中，你接收name作为prop，然后你可以通过使用watch或者方法，发出一个事件来更新父组件中的值。

...
props: {
  name: {
    type: String,
    default: ''
  }
}
...
this.$emit(update:parentNameProperty, newValue)
...

Vuex是一种处理状态的好方法，但对于小型应用来说，使用上述模式是可以的。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.