vuex 저장소의 상태를 모든 하위 구성 요소로 공유하는 방법

vuex 저장소의 상태를 모든 하위 구성 요소로 공유하는 방법

하위 구성 요소 목록을 사용하여 사용자 정의 양식 구성 요소를 만들고 있습니다.따라서 부모 컴포넌트에 자녀 컴포넌트 간에 공유할 상태(데이터)를 유지하는 vuex 스토어를 추가했습니다.모든 컴포넌트는 1페이지 컴포넌트입니다.

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

그러면 각 자녀가 VueEx 스토어에서 mySchema 및 myModel에 액세스하는 방법은 무엇일까요?

자녀 커스텀 컴포넌트에 양방향 상태 바인딩을 구현하려면 어떻게 해야 합니까?

나는 이것에 대해 일반적으로 계산된 속성을 사용해 왔다.

계산된 속성이 Vuex에서 읽도록 설정했습니다.get()이 기능을 사용하면,set()Vuex에 다시 커밋합니다.

언급URL : https://stackoverflow.com/questions/50279951/how-to-share-the-state-from-vuex-store-to-all-child-components