After several days of continuous notice, I finally wrote this article.

Series 1: Vue full site cache keep-alive: Dynamic cache removal

Series 2: Vue full site Cache 2: How to design full Site Cache

This is part 3 of a series: Vue – router-THEN: Before and after page data transfer

Series 4: Vue-router-then: Implementation Principles for Vue global Cache

preface

Vue global cache keep-alive: Dynamic removal of cache and Vue global cache In how to design the whole site cache, we have implemented the basic framework of the whole site cache, which can reuse the cache when backing between pages or jumping between pages of the same layer, reducing the request frequency and improving the user experience. The best part is that the development logic will be much simpler and intuitive in theory.

There is a new need

Between parent and child components, data can be passed to each other via Prop and $EMIT events.

In this series, we are looking at component caching and reuse of the front and back pages. Because of the keep-Alive caching feature, the front and back page component objects are still present in the system even though the front page has been removed from the interface.

As a result, a new requirement arises, that is, how to transfer data between front and back page components.

Store and Vuex

As mentioned earlier, to transfer or share data between different pages, the current mainstream solution is to use the SoTRE pattern or to introduce VUEX as a common component outside of the front and back pages, to which all pages can directly access data. link

This is a great solution that works with many scenarios, and is well worth exploring.

Leave a pit, recently researching how to make the most of this Flux feature.

Laziness is the source of human progress

Personally, I am extremely lazy. Vuex does solve the problem of data communication between before and after pages, but many times I just open a page and select a client to return to.

If I could write

<input v-model="searchText">
Copy the code

I don’t want to write:

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>
Copy the code

So, again in the mall example, if I need to open a new page to select an address on the order page, I don’t want to go around vuex and write a bunch of State Mutation actions, I want to write the following:

<! -- buySomething.vue -->
<inputSelectedAddress v-model="item.addressID" v-model-link="'/select_address'"  placeholder="Select address" /> 

<! -- selectAddress.vue -->
<template>
    <ul>
        <li @click="selectOneAddress(1)">101, East Gate, South Plaza, Beijing Road</li>
        <li @click="selectOneAddress(2)">202 Shanghai city sewer left side</li>
    </ul>
</template>
<script>
    methods:{
        selectOneAddress:function(addressID){
            this.$emit('input',addressID);
            this.$router.go(- 1); }}</script>
Copy the code

It would be nice to think of opening an address selection page, selecting the address, returning the address ID directly, or even directly compatible with the V-Model, and then doing whatever you want.

v-model-link

The custom directive V-model-link, which appears in the sample code above, comes from a feature of the plug-in vue-router-then. link

Basic usage of v-model-link:

  • In the bindingv-modelElementv-model-linkThe directive points to a new page
  • After user interaction in a new page, use$emitTrigger ainputEvents can update the data by passing it backv-modelThe corresponding value.

Note the difference in scenario here: $emit was used for event passing between parent and child components, but instead was used for event passing between the following and following page components.

Principle brief:

  • v-model-linkThe value of is a URL address. After clicking the DOM element where the instruction is located, it will jump to the URL page and listen for input events in the new page to feed back to the DOM element or component where the instruction is located.
  • becausev-modelIs ainputEvent syntax sugar, so its corresponding value will be affectedinputEvent impact.
  • The previous page component is not destroyed because of the cache, which is the basis for the successful use of vue-router-then.
    • So, be sure to set the hierarchy of each route page correctly, if the component is destroyed when you leave the page, you can’t play.

vue-router-then

The core essence of VUe-router-then is to realize the function of manipulating components on the next page in the current page. V-model-link is just a syntax sugar instruction based on this function. Of course, it is also the most important and commonly used feature instruction.

How to install

npm install vue-router-then --save;
Copy the code
import Vue from 'vue'
import router from './router'

import routerThen from 'vue-router-then';
routerThen.initRouter(router)
Vue.use(routerThen)
Copy the code

Usage method 1: Operate the next component object on the current page

The plug-in is called vue-router-then, and as the name implies, its biggest feature is that it returns a promise object to the Router’s methods (push,replace,go) and uses the vm of the new page as a parameter to be processed in the THEN method.

methods:{
    clickSomeOne:function(){
        this.$routerThen.push('/hello_world').then(vm= >{
            // The VM here is the component object of the new page hello_world
            console.log(vm); }); }},Copy the code

Usage method 2: Use $Routerthen. modelLink on the current page to obtain the value of the input event reported by the next page component

A custom modelLink method has been added to $routerThen to handle values reported from the next page, which can also manipulate the next page component object.


methods:{
    jumpToNextPage:function(value){
        this.$routerThen.modelLink('/select_price',value=>{
            // Get the value from the input event emitted from $emit on the select_price page
            console.log(value);
        }).then(vm= >{
            // The VM here is the component object of the new page select_price
            console.log(vm); }); }},Copy the code

Usage method three: Use the custom instruction V-model-link with the V-Model

<inputCustomer v-model="item.customerID" v-model-link="'/select_customer'" />
Copy the code

Here’s another chestnut

In our account receivable APP, there is a page for selecting customers, which supports searching customers. If the customer cannot be found, it should be supported to establish a customer by keyword and select a new customer.

That is to say, edit contract -> Select customer -> Create customer three pages, the core code is as follows:

Editorial Contract:

<! -- InitEditContractDetail.vue -->
<inputCustomer v-model="item.customerID" v-model-link="'/customer/select_customer'"/>
Copy the code

Customer selection:

<! -- InitSelectCustomer.vue -->
<template>
    <div>
        <input type="text" v-model="keyword" />
        <a @click="newCustomerJumpLink">new</a>
    </div>
</template>
<script>
    methods:{
        newCustomerJumpLink(){
            this.$routerThen.modelLink('/customer/edit',value=>{
                this.newCustomerAdded(value)
            }).then(vm= >{
                if (this.keyword)
                {
                    vm.$set(vm.item,'name'.this.keyword); }}); },newCustomerAdded:function(customerID){
            this.$emit('input',customerID);
            this.$router.go(- 1); }},</script>
Copy the code

New customers:

<! -- InitCustomerEdit.vue -->
<template>
    <div>
        <div>The customer name</div>
        <input type="text" v-model="item.name" />
        <div class="btn_submit" @click="submit">submit</div>
    </div>
</template>

<script>
    methods:{
        submit:function(a){
            this.$emit('input',customerID);
            this.$router.go(- 1); }}</script>
Copy the code

After the language

At this point, you should be able to handle most of the project scenarios.

There will be a few more articles looking at vue-router-then, what weird things can happen to a user’s data in extreme cases like full site caching, and what more interesting things can be done.

Stay tuned.

The implementation principle of Vue -router-then for Vue – site cache

From the original star blog: wanyaxing.com/blog/201807…