木灵鱼儿

木灵鱼儿

阅读:170

最后更新:2021/07/30/ 16:14:55

分享一个利用vuex+session缓存侧边栏数据的方案

前言

侧边栏导航大多数情况可能会由后端返回导航内容,第一是方便修改,第二是可以做一些菜单鉴权操作,但是这也会产生一个问题:侧边栏api请求会非常频繁

如何避免这个问题,我们就需要使用缓存方案,在web中,缓存有:local,session,cookie,还有一些更复杂的就不说了,用不到。

local会永久存储,这样我们刷新页面,数据以缓存优先的话,就会无法及时更新了。pass

cookie,spa用cookie很少了,而且他有容量限制,直接pass。

那么只有session了,session会在页面关闭后自动清理,这样下次重新打开页面数据依旧可以保持最新,并且新建页面,同域名,session也是可以读取的,所以,完美。

解决方案

直接上vuex代码

/*
 * @Author: mulingyuer
 * @Date: 2021-07-30 15:23:50
 * @LastEditTime: 2021-07-30 15:53:05
 * @LastEditors: mulingyuer
 * @Description: 侧边栏vuex
 * @FilePath: \agent-admin-vue\src\modules\admin\store\sidebar.js
 * 怎么可能会有bug!!!
 */
import { menuData } from "../api/sidebar";

export default {
  namespaced: true,
  state: {
    sidebarData: [], //数据
  },
  getters: {
    sidebarData(state) {
      return state.sidebarData;
    }
  },
  mutations: {
    //普通赋值
    setSidebarData(state, value) {
      state.sidebarData = value;
      sessionStorage.setItem("agent-sidebar", JSON.stringify(value));
    },
    //session赋值
    sessionSetSidebarData(state, value) {
      state.sidebarData = value;
    },
    //清空session数据
    clearSessionSidebarData(state) {
      sessionStorage.removeItem("agent-sidebar");
    },
  },
  actions: {
    //获取导航数据
    async getSidebarData({ commit }) {
      try {
        //先读缓存
        const sessionData = sessionStorage.getItem("agent-sidebar");
        if (sessionData) {
          commit("sessionSetSidebarData", JSON.parse(sessionData));
        } else {
          //从api获取
          const { data } = await menuData();
          commit("setSidebarData", data);
        }
      } catch (error) {
        console.error(error);
      }
    }
  }
}

使用的时候:

<script>
export default {
  computed: {
    //侧边栏导航数据
    sidebarData({ $store }) {
      return $store.getters["sidebar/sidebarData"];
    },
  },
  created() {
    //侧边栏数据
    this.$store.dispatch("sidebar/getSidebarData");
    window.addEventListener("beforeunload", () => {
      this.$store.commit("sidebar/clearSessionSidebarData");
    });
  }
}
<script>

为了保证用户刷新后侧边栏也会更新数据,我们需要监听一下beforeunload事件,然后清空一下session即可,这样在getSidebarData逻辑中,会调用api获取,数据更新成功。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 170

相关文章

目录树