Отправить значения из нескольких компонентов

Question

Я использую vuejs -Wizard для создания страницы регистрации, у меня есть каждая вкладка в компоненте, подобном этому

<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 для сохранения состояния или есть лучший / более простой способ?

Спасибо

Answer 1

Да, вы должны просто использовать vuex, он объединяет данные, так что он не распространяется на несколько файлов. Если вы собираетесь отправлять эту информацию обратно на ваш сервер, вам будет проще иметь большинство внутренних подключений в одном месте. без волшебника я переделал твой код в таком магазине. Обратите внимание на вычисляемое свойство вместо использования данных. Делая это как вычисляемое свойство, вам не нужно писать код для изменения переменных, хранящихся в хранилище.

Личный. 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>

Контакт. vue

<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>

Магазин / индекс. 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.
    //},
  },
});

Если вы решите go сохранить маршрут, все, что вам нужно сделать, это 1. npm установить vuex 2. добавить папку внутри вашей папки sr c с именем store 3. добавить файл с именем index. js 4. go на главную. js и добавьте эту строку "import store from" ./store ";" 5. там, где написано «Vue ({« добавить »магазин» », это зарегистрирует его.

Vuex очень прост и облегчает жизнь по мере того, как ваш проект становится больше.

Answer 2

Модификатор .syn c обеспечивает двухстороннюю привязку к реквизиту, вы можете прочитать об этом здесь https://vuejs.org/v2/guide/components-custom-events.html#sync -Modifier .

В родительском компоненте вы можете использовать Модификатор .syn c следующим образом:

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

Затем в дочернем компоненте вы получаете имя в качестве prop и вы можете создать событие для обновления значения в родительском компоненте, используя watch или метод:

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

Vuex - это отличный способ обработки состояния, но он подходит для использования вышеупомянутого шаблона для небольших приложений.

Answer 3

Это зависит ...

Ответ зависит от различных факторов. Например, вы уже используете vuex, размер приложения, возможность тестирования приложения и даже как проверяются поля (проверки асинхронности / API?).

Когда это простое приложение, и я только есть прямые родительские => дочерние отношения, я склонен пропустить добавление Vuex в качестве зависимости. (но я в основном имею дело с SPA, поэтому я обычно использую его) YMMV.

В этом случае для этого потребуется определить поля в родительском элементе. Затем добавьте реквизиты и излучатели для каждого значения дочерним элементам и слушателю родительского элемента. Однако, когда вы начнете добавлять больше полей, вы можете найти это утомительным и выбрать передачу полей в объекте либо в группах, либо в целом (и выбрать только те, которые вам нужны во вкладке), а затем вы сможете реализовать свои собственные 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), я бы использовал это решение в приложении такого размера.