We have built takeaway projects with Vue from scratch, and have a better understanding of vue. We have gradually realized the three modules of ordering, evaluation and business. Let's review the previous modules.

Module review

Order module:

Evaluation module:

Business module:

Module optimization

Now we need to further improve our project. Now there is a need for this:

When we select the corresponding products under the order column and then browse other items, then if we return to the order column, the corresponding products will still exist. The technical implementation of this requirement requires keeping-alive of vue.

Now let's add keep-alive in app.vue:

<template>
  <div id="app">
    <myHeader :poiInfo="poiInfo"></myHeader>
    <myNav :commentNum="commentNum"></myNav>
    <keep-alive>
      <router-view/>
    </keep-alive>
    
  </div>
</template>

<script>
import myHeader from "components/Header/Header";
import myNav from "components/Nav/Nav";

export default {
  name: "App",
  components: {
    myHeader,
    myNav
  },
  data() {
    return {
      poiInfo: {},
      commentNum: 0
    };
  },
  created() {
    this.$axios
      .get("api/goods")
      .then(response => {
        let json = response.data;
        if (json.code === 0) {
          
          this.poiInfo = json.data.poi_info;
        }
      })
      .catch(function(error) {
        // handle error
        console.log(error);
      });
   // evaluate
    this.$axios
      .get("/api/rates")
      .then(response => {
        let json = response.data;
        if (json.code === 0) {
       
          this.commentNum = json.data.comment_num;
        }
      })
      .catch(function(error) {
        // handle error
        console.log(error);
      });
  }
};
</script>

<style>
#app {
}
</style>

We use the < keep-alive > tag to wrap < router-view/> which is the three modules we have written above. This allows the state to be kept in memory during component switching and prevents duplication of DOM rendering. It meets our project requirements and improves the performance of the application.

summary

In this article, we have done the final optimization of the project. The whole vue project has come to a successful conclusion. Thank you for your company. I believe this topic can really help you. In particular, we hope you can continue to pay attention to the follow-up articles.