Использование Vuex с динамически созданными компонентами

Question

Я хочу использовать Vuex для управления динамически создаваемыми компонентами.В моем приложении у меня есть несколько страниц и «полевые» компоненты на каждой странице.Несколько компонентов поля могут быть добавлены на каждой странице.Каждый компонент поля будет иметь текстовые поля, которые пользователи могут редактировать.Я хотел бы отслеживать эти значения как пользовательский тип, чтобы это состояние всегда было актуальным (например, v-model).Также можно добавить несколько страниц.

У меня проблемы с поиском Vuex способа отслеживать новые страницы и компоненты полей, которые пользователи добавляют или удаляют.

//example of how my state looks
const state = {
    pages: [ 
        {
            id: '1',
            name: 'Contact Information',
            fields: [ 
                {
                    name: 'First Name',
                    type: 'text-field',
                    required: true
                }
            ]
        },
        {
            id: '2',
            name: 'Activities',
            fields: [ 
                {
                    name: 'Summary',
                    type: 'textarea-field',
                    required: true
                }
            ]
        }
    ]
}

//pages are just tabs
<a @click="addPage">Add Page</a>
<ul class="nav nav-tabs" data-tabs="tabs">
    <li class="nav-item"  v-for="(page,key) in allPages" :key="key">
         <a class="nav-link" data-toggle="tab">
         {{page.name}}
         </a>
    </li>
</ul>

//example of how the field html looks
<div class="tab-pane" v-for="(page, key) in allPages" :key="key">
     <div v-for="(field, key) in page.fields" :key="key">
          <page-field :value="field.name" :type="field.type"/>
     </div>
     <a @click="addField">Add Field</a>
</div>

//field component example
<template>
<div>
    <input type="text"> //I want to keep track of this input with Vuex every time a new field component is added
</div>
</template>

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

Answer 1

Вы можете добавить обработчик события input, который вызывает мутацию Vuex, чтобы установить поле страницы ...

1. В хранилище обновите элемент массива fields, чтобы он содержалvalue свойство, которое будет содержать пользовательский ввод:

/* store.js */
const state = {
  pages: [
    {
      // ...
      fields: [
        {
          // ...
          value: null ?
        }
      ]
    },
    {
      // ...
      fields: [
        {
          // ...
          value: null ?
        }
      ]
    }
  ]
}

Также добавьте мутацию Vuex, которая устанавливает поле страницы:

/* store.js */
const mutations = {
  SET_PAGE_FIELD(state, { pageId, fieldName, fieldValue }) {
    const page = state.pages.find(page => page.id === pageId)
    if (page) {
      const field = page.fields.find(field => field.name === fieldName)
      if (field) {
        field.value = fieldValue
      }
    }
  }
}

export default new Vuex.Store({
  state,
  mutations ?
})

Обновлены элементы ввода page-field для генерации события input с целевым значением:

/* PageField.vue */
<template>
  <div class="page-field">
    <input @input="$emit('input', $event.target.value)" ...> ?
    <textarea @input="$emit('input', $event.target.value)" .../> ?
  </div>
</template>

Обработайте событие input в родительском объекте, изменив поле страницы в хранилище (с помощью мутации на шаге 2):

/* App.vue */
<template>
  <div class="tab-pane" v-for="page in allPages" :key="page.id">
    <div v-for="field in page.fields" :key="field.name">
      <page-field
        @input="setField(page.id, field.name, $event)" ?
        :type="field.type"
      />
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    setField(pageId, fieldName, fieldValue) {
      this.$store.commit('SET_PAGE_FIELD', { ?
        pageId,
        fieldName,
        fieldValue
      });
    }
  }
}
</script>