javascript - vue js中从一个组件转到另一个组件时如何保留组件的信息

Question

如果我有两个组件，第一个组件称为 A:

<template>
<input  required type='text' v-model.trim="number">
<input type="date" v-model="date" >
<button @click='allRecords(number,date)'>ok</button>
 <table >
    <thead>
      <th>Coordonnées</th>
    </thead>
    <tbody>
      <tr v-for='contact in contacts'>
        <td @click="seeDetails(contact.id)" > {{ contact.data.to }} 
</td> 
      </tr>
    </tbody>
  </table>
</template>

<script lang="js">
import axios from 'axios';
import Vue from 'vue';
export default {
name: 'A',
props: [],
data() {
  return {
contacts: [],
number: '',
date: new Date().toISOString().slice(0,10),
nombre:0
 }

},
methods: {
 allRecords: function(number,date) {
   axios.get(`/api/contacts?number=${number}&date=${date}`)
     .then(response => {
       this.contacts = response.data.list;
       this.nombre = response.data.count;
     })
     .catch(error => {
       console.log(error);
     });
 },
 seeDetails (id) {
     this.$router.push({ name: 'B', params: { id }});
   }, 
}
</script>

第二个称为B:

  <template>
  <div> {{details.data.add }}</div>
  </template>
  <script lang="js">
    import axios from 'axios';
    export default  {
     name: 'B',
     props: [],
      mounted() {
       const id = this.$router.currentRoute.params.id;
    this.fetchContactData(id);
   },
   data() {
    return {
     details: []
    }
  },
  methods: {
   fetchContactData(id){
    axios.get(`/api/recherche/${id}`)
    .then(response => {
        this.details = response.data
    })
    .catch(error => {
        console.log(error);
      });
     },
    },
   } 
  </script>

我希望当我离开我的组件 B 时，我的组件 A 可以获得 A 的信息，该信息与我在 B 中得到的结果相对应，而无需再次输入日期和数字。哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

Answer 1

您已经陷入了应用程序状态的问题，并且观点可能有所不同。推荐的解决方案是vuex。对于简单的情况，我喜欢将应用程序状态保存在全局 JavaScript 变量中。你的 vue 组件不需要传递状态，但它们引用 vue 之外的单一事实来源，它们都可以显示和修改。因此，您的应用程序状态是一个联系人数组，而您的 B 组件需要一个更好的名称，它只会将行插入该数组。当您返回 A 时，您的页面将反射(reflect)新数据。