Vue：在另一个页面上显示来自表单提交的响应

Question

我有一个<form>在vue。我将该表单发送到服务器，获取 JSON 响应，然后将其打印到控制台。它工作正常。

但是，我需要获取该 JSON 响应并将其显示在另一个页面上。例如，我有两个.vue文件：GetAnimal.vue具有表单并从 API 检索动物数据的文件和DisplayAnimal.vue显示动物数据的文件。我需要将响应动物数据从GetAnimal.vue到DisplayAnimal.vue。

获取Animal.vue：

<template>
 <form v-on:submit.prevent="getAnimal()">
  <textarea v-model = "animal"
      name = "animal" type="animal" id = "animal"
      placeholder="Enter your animal here">
  </textarea>

  <button class = "custom-button dark-button"
      type="submit">Get animal</button>
 </form>
</template>

<script>
    import axios from 'axios';

    export default {
        name: 'App',
        data: function() {
            return {
                info: '',
                animal: ''
            }
        },
        methods:  {
            getAnimal: function()  {
                 axios
                    .get('http://localhost:8088/animalsapi?animal=' + this.animal)
                    .then(response => (this.info = response.data));
                 console.log(this.info);
            }
        }
    }
</script>

response : 检索带有动物数据的 JSON，像这样说：

{
"fur-color": "yellow",
"population": 51000,
"isExtinct": false,
"isDomesticated": true
}

我现在想将该 JSON 提供给DisplayAnimal.vueat/viewanimal端点：

DisplayAnimal.vue :

<template>
  <div>
    <p>Animal name: {{animal}}}</p>
    <p>Fur color: {{furColor}}</p>
    <p>Population: {{population}}</p>
    <p>Is extinct: {{isExtinct}}</p>
    <p>Is domesticated: {{isDomesticated}}</p>
  </div>
</template>

我该怎么做？我知道我可以通过 重定向this.$router.push({ path });，但我只将它用于导航，而这里需要传递 JSON 响应。这甚至是解决此问题的正确/良好实践方法吗？

编辑：

我试过这个：

在GetAnimal.vue 中，我添加了以下数据：

data: function() {
   return {
     animal:  {
       name: 'Cat',
       furColor: 'red',
       population: '10000',
       isExtinct: false,
       isDomesticated: true
}

在DisplayAnimal.vue 中：

<script>
    export default  {
        props:  {
            animal:  {
                name: {
                    type: String
                },
                furColor:  {
                    type: String
                },
                population: String,
                isExtinct: String,
                isDomesticated: String
            }
        }
    }

</script>

在GetAnimal.vue 中我添加了这个：

methods: {
            animals: function()  {
                alert("animals");
                this.$router.push({name: 'viewanimal',
                                query: {animal: JSON.stringify(this.animal)}});
            },

尝试使用显示组件显示该测试动物。但是它不起作用 - 我得到一个空白页面。

Answer 1

使用Vuex，你可以轻松解决这个问题

netlify 上的工作示例 https://m-animalfarm.netlify.app/

github 上的代码 https://github.com/manojkmishra/animalfarm

GetAnimal.vue（我已禁用 axios 调用测试和硬编码信息）

 <template>
 <form v-on:submit.prevent="getAnimal()">
   <textarea v-model = "animal" name = "animal" type="animal" id = "animal"
   placeholder="Enter your animal here">
  </textarea>
  <button class = "custom-button dark-button"
  type="submit">Get animal</button>
  </form>
 </template>
 <script>
 import axios from 'axios';
 export default 
 {
    name: 'App',
    data: function() {  return { info: '', animal: ''  }  },
    methods:  {
        getAnimal: function()  {
            // axios
            //   .get('http://localhost:8088/animalsapi?animal=' + this.animal)
             //   .then(response => (this.info = response.data),
                this.info={"fur-color": "yellow","population": 51000,"isExtinct":     
                            false,"isDomesticated": true },
                this.$store.dispatch('storeAnimals', this.info)
                //);
        }
    }
 }
 </script>

DisplayAnimal.vue

<template>
<div>
<p>Animal name: {{stateAnimal.animal}}</p>
<p>Fur color: {{stateAnimal.furColor}}</p>
<p>Population: {{stateAnimal.population}}</p>
<p>Is extinct: {{stateAnimal.isExtinct}}</p>
<p>Is domesticated: {{stateAnimal.isDomesticated}}</p>
 </div>
</template>
<script>
 import {mapState, mapGetters} from 'vuex';
export default {
computed:{  ...mapState({ stateAnimal:state => state.modulename.stateAnimal }),   
 },
}
</script>

modulename.js（商店模块）

export default
{
 state: {stateAnimal:null,  },
 getters:{ },
 mutations: 
 {    ['STORE_ANIMALS'] (state, payload) 
    {  state.stateAnimal = payload;  
    console.log('state=',state)
   },

  },
 actions: 
 {  storeAnimals: ({commit}, data) => 
    { console.log('storeanim-data-',data);
      commit(  'STORE_ANIMALS', data   );  
    },     
  }
  }

Index.js（用于 vuex 商店），如果页面刷新，您可以禁用持久状态作为其保存状态

import Vue from 'vue'
import Vuex from 'vuex'
import modulename from './modules/modulename'
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex)
export default new Vuex.Store({
plugins: [createPersistedState({ storage: sessionStorage })],
state: {  },
mutations: {  },
actions: {  },
modules: { modulename }
})

状态对所有组件可用/共享

Answer 2

首先创建第二个文件夹，将其命名为 services，并为您的 axios 调用创建 service.js - 良好的实践和更干净的代码。第二次使用vuex。这种数据最好与vuex一起使用。

据我了解 GetAnimal.vue 是父组件，您希望在子组件 DisplayAnimal.vue 中显示它。如果是这样，并且您想看看这是否有效，只需使用道具即可。您还可以使用 $emit() 将子级的相同信息或任何其他信息发送回父级。强烈建议使用 vuex 来管理状态