如何将数据从VueJS组件传递到main.js?

时间:2018-10-18 00:36:28

标签: javascript node.js vue.js vuex state-management

是否可以将在data()方法的组件中定义的数据发送到main.js文件(或在其中定义Vue实例的位置)?我以为我可以使用vueX进行以下操作,但是即使了解计算的道具,吸气剂和突变后,也不知道如何处理它:

Data in Component -> Store -> Main.js

编辑:如何在COMP中的VUEX商店中设置数据?

想象一下,商店有一个名为currentList的属性,该属性的值需要从Component1.vue中的列表中输入。我如何将该列表发送到VueX商店?

2 个答案:

答案 0 :(得分:1)

我不知道Vue,但我相信我了解您在寻找什么。 在其他所有前端框架中,您想要实现的目标可以称为:“父级通信的组件”。

您可以有一个4级嵌套组件,并且想要将一些数据传递给Main.js(我想在Vue中它仍然是一个组件,确切地说是根组件)

如我所见,您可以使用$ emit:https://forum.vuejs.org/t/passing-data-back-to-parent/1201 在React中(您也可以在Vue中做到这一点,但您应该选择vue样式解决方案),您将使用回调函数:父函数将子函数传递给子函数,子函数可以调用该函数在父组件内部设置某个属性

如今,另一个完全避免这种通信的通用选项是使用像Redux这样的状态管理库。因为每个组件都可以访问全局存储(就像全局变量一样),并且在第4级组件在该全局存储中设置属性后,main.js可以读取它。

答案 1 :(得分:1)

如果要将数据从组件传递到Vuex $ store,则应使用Mutations(或操作,如果数据异步进入组件)。

假设您的突变已在商店中定义(并且商店已正确设置),则可以从组件中按以下方式调用它:

  

this。$ store.commit(“ YOUR_MUTATION”,“数据”)

我确实建议您在浏览器中使用vue工具来跟踪商店中的内容。