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');
相关推荐
吃饭最爱17 小时前
⽹络请求Axios的概念和作用
vue
魂尾ac19 小时前
Django + Vue3 前后端分离技术实现自动化测试平台从零到有系列 <第一章> 之 注册登录实现
后端·python·django·vue
是罐装可乐1 天前
深入理解 Vue3 Router:三种路由模式的工作原理与实战应用
架构·vue·路由·history·hash·ssr·router
老华带你飞1 天前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
zhz52142 天前
Spring Boot + Redis 缓存性能优化实战:从5秒到毫秒级的性能提升
java·spring boot·redis·缓存·vue
小胖墩有点瘦3 天前
【基于协同过滤的校园二手交易平台】
java·vue·毕业设计·springboot·计算机毕业设计·协同过滤·校园二手交易平台
小圣贤君3 天前
小说创作中的时间轴体验设计:事序图交互与用户体验优化
electron·vue·甘特图·时序图·写作软件
知识分享小能手3 天前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
@AfeiyuO3 天前
分类别柱状图(Vue3)
typescript·vue·echarts
大虾写代码3 天前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint