Question

我正在创建一个包含子组件列表的自定义表单组件。所以在我的父组件中，我添加了vuex store，它保存了我想在子组件之间共享的状态（数据）。我的所有组件都是单页组件。

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

如何在子自定义组件中实现双向状态绑定？

Answer 1

我通常为此使用computed properties。

我对其进行了设置，以便可以通过get()函数从Vuex中读取计算属性，然后可以使用set()将其提交回Vuex。

如何将状态从vuex存储共享到所有子组件

1 个答案: