An idea of using keep alive to cache data in vue3 form pages

This article has participated in 「 New artist creation ceremony , Start the road of nuggets creation together .

functional requirement

Such a requirement is often encountered in projects : There is a form page , There are a lot of fields , Some form items need to jump to a new page ( For example, select a contact ), At this time, you need to cache the data of the form page , After selecting the contact, you can return to the form page , The previously filled data will not be lost .

Functional analysis

Realize such a requirement , I thought of it the first time Vue Built in components of keep-alive, But simply use keep-alive There's a problem : Every time you enter the form page and want to resubmit data , The last data will be displayed . The actual requirement is that each time you enter the form, it will be a new page , This requires that the cached data be cleared after the submission is completed . In the use of Vue2 When , In official issue Zone found a solution hope keep-alive It can add the function of dynamically deleting cached components , But the solution is unofficial , Interested guys can learn about . Unfortunately, this solution is in Vue3 It can't be used , because #destroy It's abandoned . Let's talk about how I use Vue3 A way of thinking

precondition

1. key attribute : In the list item Use Unique key, Minimal re rendering dom, Of course key Different , It will definitely trigger the replacement , See official documentation

2. is attribute

   1. When using non single file components , Can put the original html Elements are rendered as Vue Components
   2. Use in single file components , Usually used in dynamic components Component On

3. router-view:<router-view> Exposed a v-slot API, The main use of <transition> and <keep-alive> Component to wrap your routing component .

Code writing

1. stay App.vue Use in keep-alive

   <router-view v-slot="{ Component, route }">
       <keep-alive :max="5">
         <component
           :is="Component"
           :key="route.params.keepKey ? route.params.keepKey : route.path"
           v-if="$route.meta.keepAlive"
           v-wechat-title="$route.meta.title"
         />
       </keep-alive>
       <component
         :is="Component"
         :key="$route.name"
         v-if="!$route.meta.keepAlive"
         v-wechat-title="$route.meta.title"
       />
     </router-view>
   

   Here and Vue2 Their writing is different ,Vue2 Yes, it is keep-aliveb The parcel router-view, Through the... In the routing table meta Add keepAlive The standard adapter determines which component uses the cache , Through dynamic key To indirectly clear the cache

2. The code before entering the form page :

   const goSave = () => {
     router.push({
       name: 'proposal-save',
       params: {
         keepKey: new Date().getTime()
       }
     })
   }
   

   Each time you enter the form page, a new key, To ensure that every time you enter the form page, you will replace it with the original cache

3. The form page enters the select contact page :

   const goContact = () => {
     router.push({
       name: 'proposal-contact',
       params: {
         keepKey: route.params.keepKey,
         ids
       }
     })
   }
   

   When entering the page from the form, the carrier brings the dynamic information from the previous page key

4. The code for returning to the form page after selecting the address book page

   onBeforeRouteLeave((to, from, next) => {
     if (to.name == 'proposal-save') {
       to.params.keepKey = route.params.keepKey
       to.params.selectedData = selectedData.value
     } else {
       to.params.keepKey = undefined
     }
     next()
   })
   

   In the local route navigation guard , Judge the dynamics of the form page according to the conditions key, Send it back , The components are the same when returning (key Also the same ) The previous data will be preserved , To meet the needs mentioned at the beginning

   summary

   This can only be said to be a solution to the problem , But it should not be the most elegant and the best , If a big man has a better solution , Also hope to share