Как передать состояние из хранилища vuex всем дочерним компонентам - PullRequest
Новая
       8

Как передать состояние из хранилища vuex всем дочерним компонентам

0 голосов
/ 10 мая 2018

Я создаю пользовательский компонент формы со списком дочерних компонентов. Итак, в моем родительском компоненте я добавил хранилище vuex, в котором хранится состояние (данные), которым я хочу поделиться с моим дочерним компонентом. Все мои компоненты являются одностраничными. 

// CustomFormComponent.vue (parent component)
<template>
  <div>
   <form @submit='checkStateOfChildren()' >
     // Do a for loop on mySchema in store and dynamically detect the 
     // custom component based on individual node item in mySchema[]

     forEach Node in $store.mySchema[]
       render a custom component 
         // E.g <custom_text> or <custom_radio> ....
     ...
     <button type='submit'>Submit</button>
   </form>
  </div>
<template>

import store from '../store'; // Vuex Store
export default {
 store,

   created() {
   // ... populate store schema and model object to render the form elements

  },

  methods: {
     // Do the validation on the store.state.myModel and if everything is OK ... 
    // then do a post to backend
     checkStateOfChildren() {}
  }
}

А мой магазин как ниже 

export default new Vuex.Store({
     state: {
        mySchema: {[ {custom_text_area schema}, {some component schema ...}, ...]}, 
        myModel: { custom_text_area_model, ...}
    },

    ... actions, mutations etc 
}

Так как каждый ребенок может получить доступ к mySchema и myModel из магазина VueEx?

Как реализовать двустороннюю привязку состояний в дочерних пользовательских компонентах?

1 Ответ

0 голосов
/ 09 января 2019

Я обычно использовал для этого вычисляемые свойства .

Я установил его так, чтобы вычисляемое свойство читало из Vuex в функции get(), а затем вы можете использовать set() чтобы отправить его обратно в Vuex.

...