从 VueJS + Vuex 中的父组件访问动态组件内的数据答案

【问题标题】：Access data inside dynamic components from parent component in VueJS + Vuex从 VueJS + Vuex 中的父组件访问动态组件内的数据
【发布时间】：2020-10-16 04:21:16
【问题描述】：

我创建了这个演示来更好地解释我的目标：https://codepen.io/Albvadi/pen/OJMgByR

每个按钮都会创建一个新警报，在组件数组的 vuex 存储中创建一个对象。通过component 属性，我知道要渲染的组件的类型。

每个警报都会在组件内的数据属性中生成一个随机字符串。需要如何配置与 Vuex 的连接，才能从全局 components 数组中的子 alert 组件获取数据？

谢谢！

【问题讨论】：

Vuex已经获取到各个alert组件的数据。不然Json数据组件怎么显示信息呢？
Vuex 有一个组件数组，但是每个组件都有一个 randomMessage 属性，组件内部的数据，我需要获取。我更新了示例以在每个警报中显示随机消息
like this fiddle，在每个警报中显示 RandonMessage？
不，我需要逆向。在那个小提琴中，在每个组件中，您都从父级获取randomMessage。在我的真实案例中，每个组件都从 Api 获取randomMessage，我需要在父级中获取该结果。显然，randomMessage 这只是一个例子。在我的真实项目中，它是一个具有大量属性的对象，其中嵌套了可编辑的输入绑定。
喜欢this fiddle，点击主警报然后你会看到父级在控制台打印一些东西。

标签： javascript vue.js vuex store vue-dynamic-components

【解决方案1】：

最后，我解决了一个计算属性，它给了我父项。我不知道这是最好的方法还是有更简单的方法，但我认为它是正确的。

computed: Vuex.mapState({
    getParentItem(state) {
        return state.components[state.components.indexOf(this.index)];
    }
}),

演示已解决：https://codepen.io/Albvadi/pen/wvMrpLv

【讨论】：