# vue-compent-cache

**Repository Path**: account68/vue-compent-cache

## Basic Information

- **Project Name**: vue-compent-cache
- **Description**: 在路由切换的时候，如果进入某些页面需要缓存当前页面变量，但是进入某些页面不需要缓存当前页面变量的时候，除了使用vue 官方的include和exclude,可以使用vue-compent-cache
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 1
- **Created**: 2022-02-15
- **Last Updated**: 2023-09-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-compent-cache

#### 介绍
在路由切换的时候，如果进入某些页面需要缓存当前页面变量，但是进入某些页面不需要缓存当前页面变量的时候，除了使用vue 官方的include和exclude,可以使用vue-compent-cache


#### vue安装教程

1.  npm  i  vue-compent-cache  

2.  在main.js中



```
import pageCahe from 'vue-compent-cache'
Vue.prototype.pageCahe=pageCahe
```


3.  在router.js中




```
 router.afterEach((to, from) => {
    Observer.dispatchEvent('pageCahe', {to,from})
})
```

#### 函数介绍以及使用说明(2.0版本)(new)(推荐)

   1.vueCache(params,initCallBack, cacheCallBack)<br>
     vueCache是vueTakeData,vueStoreData以及vueDataCache的进化版,在上述2个场景都可以使用<br>
     结合vue内置缓存keepAlive:true,并通过路由判断执行相应的操作<br>
     该函数需要在activated函数里面执行 即this.pageCache.vueCache.call(this,noCacheList,initCallBack,cacheCallBack)<br>
     参数数据结构<br>
     @params noCacheList  Array   从那些组件每次进来的时侯需要执行init初始化操作的<br>
                                  就将该组件定义路由时其name属性值作为其中一个数据项<br>
                                  (如果组件是引用到宿主组件里面使用,没有定义路由,则就是其宿主组件的路由name属性值)<br>
     @params initCallBack Function  每次从noCacheList里面组件进来需要执行【初始化】操作的时候,可以在该回调函数里面执行<br>
     @params cacheCallBack Function 每次从非noCacheList里面组件进来需要执行【某些】操作的时候,可以在该回调函数里面执行<br>
     代码案例：<br>

```   
    activated() {
        //因为设置keepAlive:true所以此时默认,从所有组件进来都会缓存之前的变量
        //但是通过这个函数可以设置从那些组件进来不需要缓存,每次都执行初始化操作,将data里面的变量置为初始值
        //noCacheList 为每次进入该组件时需要初始化操作的组件列表
        let noCacheList = ["share", "cp11"];
        this.pageCache.vueCache.call(
          this,
          noCacheList,
          () => {
            //每次从noCacheList里面的组件进来的时候都会执行初始化操作
            console.warn("每次从noCacheList里面的组件进来的时候都会执行初始化操作");
            console.warn('this.$data',this.$data)
          },
          () => {
            //每次从非noCacheList里面的组件进来的时候会执行下面操作
            console.warn("每次从非noCacheList里面的组件进来的时候会执行下面操作");
            console.warn('this.$data',this.$data)
          }
        );
        //每次从【noCacheList里面的组件】 或者 【非noCacheList里面的组件】进来共同需要的操作
        console.warn('每次从【noCacheList里面的组件】 或者 【非noCacheList里面的组件】进来共同需要的操作')
   }
```

#### 函数介绍以及使用说明(1.0版本)(old)

1. vueDataCache(params) <br/>
   1）使用场景:<br/>
      vue中如果不设置keepAlive:true,在路由切换的时候如果需要缓存某些变量<br/>
      路由激活按钮不在当前需要缓存变量的组件里面<br/>
      案例:<br/>
      c组件为容器组件,其页签a和b对应的组件分别为a组件和b组件<br/>
      a组件和b组件通过组件引用的方式使用或者路由跳转方式使用<br/>
      第一种情况:跳转按钮在a组件里面,跳转到d组件燃后在回到容器组件c的时候,需要缓存c组件里面的变量<br/>
      第二种情况:跳转按钮在c组件里面,跳转到d组件燃后在回到容器组件c的时候,需要缓存a/b组件里面的变量 <br/>

   2）使用说明<br/>
      在使用的组件的created或者mounted函数里面执行一次vueDataCache函数,用于设置当前组件去那个组件在返回的时候需要缓存变量,然后具体缓存那些变量,<br/>
      参数数据结构:<br/>
      {<br/>
        compentName:String   //当前组件的路由的name名称,如果是组件引用的方式使用,其没有被定义路由,那么就是其宿主组件的路由name<br/>
        targetName:Array    //进入那个组件,在返回回来的时候需要缓存变量,则该组件路由的path名称为一个数组项<br/>
        data:Object          //进入某个组件后,在返回回来的时候需要缓存的变量,key值需要和缓存的变量名一致<br/>
      }<br/>
      注意:<br/>
           使用该函数的组件需要在定义路由的时候,设置其name属性  <br/>
           如果是组件引用的方式使用,不需要被定义路由,那么就是其宿主组件的路由需要设置其name属性  <br/>
如跳转按钮在app.vue其内部的子组件Home.vue跳转到about.vue<br/>
```
//Home.vue中代码
created(){
  let obj = {
      compentName: "Home",
      targetName: ["about"],
      data: {
        test1: this.test1,  //key值需要和缓存的变量名一致
        test2: this.test2,  //key值需要和缓存的变量名一致
      }
  };
  this.pageCahe.vueDataCache.call(this, obj);        
}

```

   后续需要缓存的变量发生变化,还需要更新之前传递的数据,即在调用一次vueDataCache函数,将修改后的变量值传递进去<br/>
   仅传递data就可以,compentName,targetName一定不可以重复传递

```
//Home.vue中代码
setData(){
   //修改data里面的test2变量值
   this.test2 = "test222";
   let obj = {
     data: {
        test2: this.test2,
    }
   };
   this.pageCahe.vueDataCache.call(this, obj);
}

```

2. vueStoreData(params)\vueTakeData(params) <br/>
   1) 使用场景: <br/>
      vue中如果不设置keepAlive:true,在路由切换的时候如果需要缓存某些变量<br/>
      路由激活按钮在当前需要缓存变量的组件里面 <br/>
      案例: <br/>
      在A组件里面有个button按钮可以实现单击跳转到B组件,然后此时需要缓存变量key1,key2时, <br/>
      回来的时候key1,key2仍需要为离开时的值 <br/>

   2) 使用说明<br/>
      在单击事件函数里面,执行this.route.push()激活下一个路由之前,调用vueStoreData函数,对storeData赋值<br/>
      在进入组件的时候在created函数里面,调用vueTakeData函数,对storeData取值<br/>
      vueStoreData参数数据结构:<br/>
       [<br/>
          {<br/>
            compentName:String   //当前组件的路由的name名称,如果是组件引用的方式使用,其没有被定义路由,那么就是其宿主组件的路由name<br/>   
            data:Object          //需要缓存的变量<br/>
          },<br/>
          ...<br/>
        ]<br/>
      vueDataCache参数数据结构:<br/>
      String        //当前组件的路由的name名称,如果是组件引用的方式使用,其没有被定义路由,那么就是其宿主组件的路由name<br/>
     注意:<br/>
         使用该函数的组件需要在定义路由的时候,设置其name属性  <br/>
          如果是组件引用的方式使用,不需要被定义路由,那么就是其宿主组件的路由需要设置其name属性  <br/>
<br/>
如about.vue跳转到test.vue<br/>

```
//about.vue中代码 
toTest() {
      //缓存变量
      let arr = [
        {
          compentName: "about",
          data: {
            name: this.name,
          },
        },
      ];
      this.pageCahe.vueStoreData(arr);
      //路由跳转
      this.$router.push({
        path: "test",
      });
    },
```


```
//about.vue中代码 
created() {
    this.pageCahe.vueTakeData.call(this,'about');
  },
```

3. 在vueDataCache(params)以及vueStoreData(params)\vueTakeData(params)中开启滚动定位效果 <br/>
   在有数据列表的时候,每次从详情回来后,如果需要定位到离开时的滚动位置<br>
   上述3个函数通过指定参数都可以开启滚动定位<br>
   1).页面初始化时在created,mounted里面执行上述函数之前,先执行下面2行代码表示开启滚动定位效果<br>
      Observer.srcoll=true<br>
      Observer.srcollDom=undefined<br>
      如果是html滚动,不需要传递 srcollDom 或者 传srcollDom:undefined<br>
      如果是具体某一dom,就传递 srcollDom:该dom的id <br>
      即：<br>
       created(){    <br>
         Observer.srcoll=true    <br>
         Observer.srcollDom=undefined    <br>
         this.pageCache.vueDataCache.call(this,data)   <br>          
       } <br>
      <br>
   2).切换或者加载新列表的时候需要设置(比如切换筛选条件等) <br>
      Observer.srcollTopLength=0 <br>
       <br>
   3).离开组件,并且下次再进入时不需要滚动定位的时候 <br>
      Observer.srcoll=false <br>
      Observer.srcollTopLength=0 <br>