如何將數據從VueJS組件傳遞到main.js？

Question

是否可以將在data（）方法的組件中定義的數據發送到main.js文件（或在其中定義Vue實例的位置）？ 我以為我可以使用vueX進行以下操作，但是即使了解計算道具，吸氣劑和突變后，也不知道如何處理它：

Data in Component -> Store -> Main.js

---

編輯：如何在COMP中的VUEX商店中設置數據？

想象一下，商店有一個名為currentList的屬性，該屬性的值需要從Component1.vue中的列表中輸入。 我將如何將該列表發送到VueX商店？

Answer 1

我不知道Vue，但我相信我了解您的需求。 在其他所有前端框架中，您想要實現的目標可以稱為：“父級通信的組件”。

您可以具有第4層嵌套組件，並且想要將一些數據傳遞給Main.js（我想在Vue中它仍然是一個組件，確切地說是根組件）。

如我所見，您可以使用$ emit： https : //forum.vuejs.org/t/passing-data-back-to-parent/1201在React中（您也可以在Vue中執行此操作，但是您應該選擇vue樣式解決方案），您可以使用回調函數：父級將子級可以調用的函數傳遞給子級，以在父級comp中設置某個屬性。

如今，另一個完全避免這種通信的常見選擇是使用像Redux這樣的狀態管理庫。 因為每個組件都可以訪問全局存儲（就像全局變量一樣），並且在第4級組件在該全局存儲中設置屬性之后，main.js可以讀取它。

Answer 2

如果要將數據從組件傳遞到Vuex $ store，則應使用Mutations（或操作，如果數據異步進入組件）。

假設您已經在商店中定義了您的突變（並且商店已正確設置），則可以從組件中按以下方式調用它：

this。$ store.commit（“ YOUR_MUTATION”，“數據”）

我確實建議您在瀏覽器中使用vue工具來跟蹤商店中的內容。