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');
相关推荐
Backstroke fish5 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小曲程序5 小时前
vue3 封装request请求
java·前端·typescript·vue
Lysun0016 小时前
[less] Operation on an invalid type
前端·vue·less·sass·scss
程序视点13 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
刚刚好ā14 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
ZwaterZ18 小时前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
ZwaterZ20 小时前
el-table-column自动生成序号&&在序号前插入图标
前端·javascript·c#·vue
木子七1 天前
vue2-vuex
前端·vue
小小黑0071 天前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
Ztiddler1 天前
【npm设置代理-解决npm网络连接error network失败问题】
前端·后端·npm·node.js·vue