Nuxt使用Keep-alive缓存页面

待我称王封你为后i 2022-12-27 12:56 206阅读 0赞

Nuxt 项目中，页面缓存的问题一直是比较头疼的一件事，几乎都是很粗暴的告诉你使用 keep-alive

## layouts 添加 keep-alive ##

***default.vue***

<template>
      <div>
        <nuxt :keep-alive="isKeepActive" :keep-alive-props="{ include: includeArr }" :class="applets === 4 ? 'isCarApp' : ''" />
        <span id="cnzz_stat"></span>
      </div>
    </template>
    <script>
    import { mapState } from "vuex";
    import wxSdk from "~/utils/wxSdk.js";
    export default {
      computed: {
        ...mapState(["applets", "token", "goLogin","isKeepActive"])
      },
      data(){
        return{
          includeArr:['memberDetail'],// 包括在内的组件，是否刷新
        }
      },
    }
    </script>

***页面实例***

<template>
      <div class="page">
        <nav-bar :title="title"></nav-bar>
        <scroll-view
          :style="{ height: windowH }"
          scroll-y="true"
          @scrolltolower="scrolltolower"
        >
         
        </scroll-view>
      </div>
    </template>
    <script>
    //  #ifndef MP-WEIXIN
    import { ImagePreview, Toast } from "vant";
    // #endif
    import scrollView from "~/components/scroll-view.vue";
    import { mapState } from "vuex";
    
    export default {
      name:'memberDetail',// keep-alive 定义页面name
      components: {
        // #ifndef MP-WEIXIN
        scrollView,
        // #endif
      },
      
      computed: {
        ...mapState(["pubCommentStatus", "token"]),
      },
      beforeRouteLeave(to, from, next) {
        // 根据路由变化结合vuex，判断是否缓存
        if (to.path == "/act/member" || to.path == "/detail/commentResult") {
          this.$store.commit("SET_KEEPACTIVE", false); // 去除缓存，设置后会刷新组件
        }
        next();
      },
      data() {
        var that = this;
        return {
          title: "活动详情",
      },
      head() {
        return {
          title: this.title,
        };
      },
    };
    </script>

## vuex ##

export const state = () => ({
        isKeepActive:false,// 是否缓存会员活动详情
    })
    
    export const mutations = {
        SET_KEEPACTIVE(state,bool){
            state.isKeepActive=bool;
        }
    }
    
    // import Vue from 'vue'
    // import Vuex from 'vuex'
    
    // Vue.use(Vuex)
    
    // const store = new Vuex.Store({
    //   state: {
    //     test: 'xxxxx',
    //     counter: 0
    //   },
    //   mutations: {
    //     SetText(state, v) {
    //                     state.text = v
    //                 }
    //   },
    //   actions: {
    //     setText: function({commit}, v) {
    //                         commit('SetText', v)
    //                 }
    //   }
    // })
    
    // export default store

***注意***：在通过isKeepActive来控制keep-alive，需要注意isKeepActive变量改变会导致组件memberDetail重新渲染，在进入组件前就要控制好isKeepActive变量，避免不必要刷新