如何将数据从组件传递到 VueJS 中的其他路由

Question

我有以下组件结构：-

MainLayout ------------------> Pages
 |                              |
 |---> MyGroupList              |
 |      |                       |
 |      |---> MyGroup           |--> MyGroupPage
 |             |                     ^  
 |             |--onClick -----------| 
 |
 |
 |----> MyInputBox

MainLayout 有一个页面 MyGroupPage，该页面需要根据所点击的 MyGroup 在组中显示已提取消息的列表。但我也想在特定组中添加新消息。为此，我有 MyInputBox.

目前 MainLayout 正在获取群组列表和群组中的消息，我正在将群组列表作为道具发送到 MyGroupList。当我单击 MyGroup 时，我将以当前组作为参数发出一个事件，然后将该事件一直冒泡到 MainLayout .

<!--In MyGroup Component-->

 <q-item
    clickable
    v-ripple
    class="q-pa-md"
    @click="$emit('changedGroup', group)"
    :to="{ name: 'MyGroupPage', params: { group: group.id } }"
  >

<!-- In MyGroupList Component-->

<q-list bordered>
    <MyGroup
      v-for="group in groups"
      :key="group.id"
      :group="group"
      @changed-group="(currGroup) => $emit('changedGroup', currGroup)"
    />
  </q-list>

在那里我获取了那个组的消息。

我还使用 MyInputBox 请求输入并将该消息作为事件发送回 MainLayout。我在获取的消息列表中添加了这条新消息。

<!-- In MainLayout Component -->

<template> 
  <q-layout view="lHr lpr lFr">
   <MyGroupList :groups="groups" @changed-group="changeGroupHandler"/>
      <q-page-container>
        <router-view />
      </q-page-container>
    <MyInputBox @add-chat="addChat"/>
  </q-layout>
</template>

<script setup>
const groups = ref([]);

fetchGroups()
  .then((fetchedGroups) => (groups.value = fetchedGroups))

const messages = ref([]);

const changeGroupHandler = (currGroup) => {
  fetchMessages(currGroup) 
    .then((fetchedMessages) => (messages.value = fetchedMessages))
}

const addMessage = mess => messages.value.push(mess);
</script>

但我不知道如何将该消息列表发送到 MyGroupPage。由于点击MyGroup时MyGroupPage页面正在切换，我是否需要将MainLayout的更新消息列表再次传递给MyGroup并将其作为路由参数发送到 MyGroupPage.

我想知道该怎么做以及我正在做的事情是否是一个好的做法？

早些时候，我没有发出事件，而是将当前组作为全局状态存储在可组合项中。这与这种方法相比如何？

Answer 1

据我了解，这似乎是使用像 Vuex 这样的商店的好案例：https://vuex.vuejs.org/guide/#the-simplest-store。

它通过与所有组件共享一个状态，为您试图实现的目标提供了一个结构。

由于它看起来紧密耦合，因此它可能比尝试以一种可能难以维护的方式在页面之间进行通信更容易。

编辑：自从这个答案后我发现 Vuex 不再是推荐的解决方案。

现在推荐的是Pinia。对于任何想要将商店添加到 Vue.js 应用程序的人来说，这可能是更好的选择。

https://pinia.vuejs.org/

Answer 2

我认为你应该只使用 VueX 商店。
将您的数据保存在那里将是最干净的解决方案。

但是如果你绝对必须使用路由器，你可以将你的数据作为路由参数传递：

// Routing to other page  
this.$router.push({  
    name: 'Name_Of_The_Other_Page',  
    params: { myData: 'Your data here' }  
});

// Accessing params on the other page  
let myData = this.$route.params.myData

如何将数据从组件传递到 VueJS 中的其他路由

How to pass a data from a component to other route in VueJS

javascript

vue.js

quasar-framework

vuejs3