VUE状态持久化,储存动态路由

1. vuex

persistPlugin.js 文件

javascript 复制代码
const routerKey = "ROUTER_KEY";

export default (store) => {
  // 刷新页面时,存储改变的数据
  window.addEventListener("beforeunload", () => {
    localStorage.setItem(routerKey, JSON.stringify(store.state.router.routers));
  });

  // 将存储的数据取出,存到全局的状态管理里面
  try {
    const localState = localStorage.getItem(routerKey);

    if (localState) {
      store.dispatch("router/setRouters", JSON.parse(localState));
      store.state.router;
    }
  } catch (error) {
    console.log("本地存储数据异常");
  }
};

modules/router.js文件

javascript 复制代码
const state = {
    routers: [],
}

const mutations = {
    SET_ROUTERS(state, menuData) {
        state.routers = menuData
    },
}

const actions = {
    setRouters({ commit }, menuData) {
        commit('SET_ROUTERS', menuData)
    },
}

export default {
    namespaced: true,
    state,
    mutations,
    actions
}

store/index.js

javascript 复制代码
import Vue from "vue";
import Vuex from "vuex";
import router from "./modules/router";
import getters from "./getters";
//数据持久化
import persistPlugin from "./persistPlugin.js";

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    router,
  },
  getters,
  state: {},
  mutations: {},
  actions: {},
  plugins: [persistPlugin],
});

export default store;

** 2. pinia **

persistPlugin.js 文件

javascript 复制代码
import { useRouterStore} from '@/stores/routerStoreControl';
import { storeToRefs } from 'pinia';

const routerStore = useRouterStore();
const { routers } = storeToRefs(routerStore);
const routerKey= "ROUTER_KEY";

export default (context) => {
  const { store } = context;
  const key = store.$id;
  // 判断存储的数据是否为路由
  if(key == 'router'){
  	 // 刷新页面时,存储改变的数据
  	window.addEventListener("beforeunload", () => {
    	localStorage.setItem(routerKey, JSON.stringify(store.$state.routers));
 	});
 	 
	// 将存储的数据取出,存到全局的状态管理里面
  	try {
       const localState = localStorage.getItem(routerKey);
   	   if (localState) {
   	   	  routers.value = JSON.parse(localState);
       }
	} catch (error) {
   	   console.log("本地存储数据异常");
	}
  }
};

routerStoreControl.js

javascript 复制代码
import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useRouterStore = defineStore('router', () => { 
	const routers = ref([]);
	return { routers };
});

main.js

javascript 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia';
//数据持久化
import persistPlugin from "./persistPlugin.js";

const pinia = createPinia();
pinia.use(persistPlugin);

const app = createApp(App);
app.use(pinia);
app.mount('#app');
相关推荐
伍哥的传说1 天前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
aiguangyuan2 天前
前端开发性能优化概要
系统架构·vue·react·前端开发
不老刘2 天前
Claude Code 基于 VUE + KonvaJS 实现海报生成器(附源码)
vue·claude·konvajs
今天不要写bug4 天前
js原生实现搜索框下拉列表输入框模糊匹配高亮
javascript·vue·ecmascript
weixin_422201304 天前
uniapp自定义圆形勾选框和全选框
javascript·uni-app·vue·自定义·checkbox
敲可耐的咕魂君4 天前
【建议AI收录本信息】electron进行主进程和渲染进程异步通信
electron·vue
前端程序猿-秦祥5 天前
uniapp打开导航软件并定位到目标位置的实现
前端·uni-app·vue·导航
sunbyte5 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ImageCarousel(图片轮播组件)
前端·javascript·vue.js·vue·ecmascript
百锦再5 天前
Vue使用element plus组件的细节问题之时间格式
前端·javascript·vue.js·vue·element·date·elementsplus
F2E_Zhangmo8 天前
基于cornerstone3D的dicom影像浏览器 第二章,初始化页面结构
前端·javascript·vue·cornerstone3d·cornerstonejs