项目中vueX实现页面缓存功能

思路：
1、APP.vue全局包裹keep-alive 。
2、利用vuex实现状态管理。
3、通过监听keepAlives这个数组来确定缓存的页面。

下面是我写的一个小demo希望对大家有用

1.app.vue上加上keep-alive标签，同时实现监听改变:include=“keepAlives”。

<template>
  <div id="app">
    <keep-alive :include="keepAlives">
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
    
    
  name: 'App',
  data () {
    
    
    return {
    
    

    }
  },
  computed: {
    
    
    keepAlives() {
    
    
      return this.$store.getters.getkeepAlives;
    },
  },
}
</script>

2.设计实现vuex全局去处理"keepAlives"。
store>index.js

import Vue from 'vue';
import Vuex from 'vuex';

let keepAlives = [];
Vue.use(Vuex);
let store = new Vuex.Store({
    
    
  state: {
    
    
    keepAlives,
  },
  getters: {
    
    
    getkeepAlives: (state) => {
    
    
      return state.keepAlives;
    },
  },

  mutations: {
    
    
    pushKeepAlives: (state, value) => {
    
      //缓存页面
      const index = state.keepAlives.indexOf(value);
      if(index === -1) {
    
    
        state.keepAlives.push(value);
      }
    },
    deleteKeepAlives: (state, value) => {
    
      //清除缓存
      const index = state.keepAlives.indexOf(value);
      if (index > -1) {
    
    
        state.keepAlives.splice(index, 1);
      }
    }
  },
});
export default store;

3.实际使用
通过上两步已经让缓存跟vueX关联上了，我们只需要在需要缓存的页面通过this.$store.commit(‘pushKeepAlives’, ‘XXXXX’)，来操作keepAlives这个数组，在app.vue会监听这个数组的变化从而实现缓存具体页面的功能。

<template>
  <div>
    <h1>OnePage 1111111111</h1>
    1 . <input type="text" v-model="tex1">
    2 . <input type="text" v-model="tex2">
    3 . <input type="text" v-model="tex3">
    <div>
      Vuex上的state{
    
    {
    
    this.$store.state.count}}
    </div>
    <div>
      getters的count{
    
    {
    
    value}}
    </div>
    <div style="margin-top:20px">
      <button @click="goTwo">跳转</button>
    </div>
    <button @click="add">
      加1
    </button>
    <button @click="del">
      减1
    </button>
  </div>
</template>
<script>
export default {
    
    
  name: 'onePage',
  data () {
    
    
    return {
    
    
      tex1:'',
      tex2:'',
      tex3:''
    }
  },
  mounted () {
    
    
    this.$store.commit('pushKeepAlives', 'onePage');
  },
  activated () {
    
    
    console.log('执行activated')
  },
  computed: {
    
    
    value: function(){
    
    
      return this.$store.getters.getCount
    }
  },
  methods:{
    
    
    goTwo (){
    
    
      let param = {
    
    
          name: 'twoPage',
          params: {
    
    
            id:'0000'
          },
        };
        this.$router.pushPage(param);
    },
    add () {
    
    
      this.$store.commit('addCount',1)
    },
    del () {
    
    
      this.$store.commit('delCount',1)
    }

  },
}
</script>

这个具体缓存的时间节点根据具体业务场景来使用。
例如：

mounted () {
    
    
    this.$store.commit('pushKeepAlives', 'onePage');
  },

 beforeRouteLeave(to, from, next) {
    
    
    if (to.name === 'waveOrderDetail') {
    
    
      this.$store.commit('pushKeepAlives', 'onePage');
    } else {
    
    
      this.$store.commit('deleteKeepAlives', 'onePage');
    }
    next();
  },

清除缓存的方法也写在mutations里面了，这里就不重复了；具体在什么节点触发以具体业务为准。

在一些工厂、物流app项目中经常会涉及到表单的提交以及在表单页面查看详情改变路由的情况；这个时候我们就可以用到这种缓存的方法来处理。

项目中vueX实现页面缓存功能

猜你喜欢