木灵鱼儿

木灵鱼儿

阅读：1255

最后更新：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获取，数据更新成功。

文章分类 vue 项目实战
文章标签 vuevuexsession导航侧边栏缓存sidebar
木灵鱼儿

木灵鱼儿

发布了 716 篇文章获得点赞 0获得阅读 1255

版权申明

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

one
two
three

关于作者

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

相关文章

利用发布订阅模式封装一个IntersectionObserver利用发布订阅模式封装一个IntersectionObserver
typecho 自定义分类和分类高亮处理typecho 自定义分类和分类高亮处理
ts封装一个localStorage和sessionStorage的类ts封装一个localStorage和sessionStorage的类
利用typescript实现原生css变量的主题切换功能类利用typescript实现原生css变量的主题切换功能类
typecho主题开发：基于webpack5的多页面打包项目typecho主题开发：基于webpack5的多页面打包项目

目录树