项目中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项目中经常会涉及到表单的提交以及在表单页面查看详情改变路由的情况;这个时候我们就可以用到这种缓存的方法来处理。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值