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 小时前
基于Spring Boot的船舶监造系统的设计与实现,LW+源码+讲解
java·论文阅读·spring boot·后端·vue
Yaml412 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
清灵xmf15 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
琴~~2 天前
前端根据后端返回的文本流逐个展示文本内容
前端·javascript·vue
程序员徐师兄2 天前
基于 JavaWeb 的宠物商城系统(附源码,文档)
java·vue·springboot·宠物·宠物商城
shareloke2 天前
让Erupt框架支持.vue文件做自定义页面模版
vue
你白勺男孩TT3 天前
Vue项目中点击按钮后浏览器屏幕变黑,再次点击恢复的解决方法
vue.js·vue·springboot
虞泽3 天前
鸢尾博客项目开源
java·spring boot·vue·vue3·博客
工业互联网专业3 天前
Python毕业设计选题:基于django+vue的4S店客户管理系统
python·django·vue·毕业设计·源码·课程设计
麦麦大数据3 天前
vue+django+neo4j航班智能问答知识图谱可视化系统
django·vue·echarts·neo4j·智能问答·ltp·航班