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');
相关推荐
叫我阿柒啊2 小时前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
工业互联网专业12 小时前
基于Spark的新冠肺炎疫情实时监控系统_django+spider
python·spark·django·vue·毕业设计·源码·课程设计
SheldonChang14 小时前
Onlyoffice集成与AI交互操作指引(Iframe版)
java·人工智能·ai·vue·onlyoffice·postmessage
lichong95115 小时前
【混合开发】Android+Webview+VUE播放视频之视频解析工具mediainfo-Macos
android·macos·架构·vue·音视频·api·postman
PBitW1 天前
element plus 使用细节 (二)
前端·vue·element plus·element使用细节
叫我阿柒啊1 天前
从全栈开发到云原生:一位Java工程师的实战经验分享
java·spring boot·redis·云原生·kafka·vue·全栈开发
叫我阿柒啊2 天前
Java全栈工程师的实战面试:从Vue到Spring Boot的技术旅程
java·spring boot·微服务·vue·api·react·rest
刺客-Andy2 天前
CSS中使用 HSL(Hue, Saturation, Lightness) 动态生成色值
前端·css·前端框架·vue
顾辰逸you3 天前
mixins实现逻辑复用
前端·vue.js·vuex
獨孤殤3 天前
Flutter + Web:深度解析双向通信的混合应用开发实践
前端·flutter·vue