如何在 vue JavaScript 中将数据从一个组件恢复到另一个组件

Posted 2023-02-23

【中文标题】如何在 vue JavaScript 中将数据从一个组件恢复到另一个组件

【英文标题】：How to recover data from one component to another in vue JavaScript

【发布时间】：2018-11-18 14:30:54

【问题描述】：

我有两个组件：

组件1：recherche

<template>
<button @click='allRecords()'>Search</button>
      <table>
        <thead>
          <th class="center">Date</th>
          <th class="center">Statut</th>
        </thead>
        <tbody>
          <tr v-for='contact in contacts' @click="seeContactDetails(contact.data.bid)">
            <td> contact.date </td>  
            <td> contact.data.statut </td>
          </tr>
        </tbody>
      </table>
</template> 
<script lang="js">
import axios from 'axios';
export default 
name: 'recherche',
components: 

,
props: [],
mounted() 

,
data() 
  return 
    contacts: [],
    details:[],
  
,
methods: 
  allRecords: function() 

    axios.get(`/api/recherche/`)
      .then(response => 
        this.contacts = response.data.list;
      )
      .catch(error => 
        console.log(error);
      );
  ,
  seeContactDetails: (bid) => 
    window.location = `/#/detail/$bid`;
    axios.get(`/api/detail/contacts?bid=$bid`)
      .then(response => 
        this.details = response.data.list;
      )
      .catch(error => 
        console.log(error);
      );
  
,

 </script>

但是我想在detail组件中显示seeContactDetails(bid)的结果

组件 2：细节

<template lang="html">
<div v-for='detail in details'>
    <!-- ligne -->
    <div class="row">
      <!-- colonne -->
      <div class="col-md-2">org: detail.data.org</div>
      <div class="col-md-2">num:detail.data.num </div>
    </div>
</template>
<script lang="js">
export default  
name: 'detail',
props: ['recherche'],
mounted() ,
data() 
  return 
      details: []
  
,
methods: 

,
computed: 



</script>

总之，我想在另一个组件中阅读 axios 查询的结果，但我不知道我们是怎么做的，尽管有文档。 我尝试将组件 recherche 的名称放在详细的道具中，但它不起作用

【问题讨论】：

这两个组件有什么关系？

我想建立两者之间的关系

【参考方案1】：

我推荐的方式（对于大多数情况）是使用 vuex。

这些是我会使用的文件

vuex（存储、操作、修改器、获取器） apiHandler（进行实际调用的实用函数） 组件 1 组件 2

在对组件 1 执行一些操作后，会触发 vuex 操作。在 vuex 操作中，调用了适当的 apiHandler 函数。在 vuex 操作 中，响应由 then() 处理，它将响应推送到 vuex mutator。这个突变将更新 getter，它会更新任何正在监听状态变化的组件。

这比让组件直接对话要复杂一些，但它使架构具有可扩展性。

【讨论】：

这里是一个示例项目，显示了这个github.com/igeligel/vuex-simple-structure/tree/master/src

很遗憾，我没有理解这个例子中的所有内容，但谢谢。