vuex：解决页面刷新vuex数据重置

最新推荐文章于 2024-10-14 16:32:08 发布

大牙Adela

最新推荐文章于 2024-10-14 16:32:08 发布

阅读量1.1k

点赞数 1

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/zxxAdela/article/details/124103330

版权

文章讨论了Vuex状态管理库中的数据在浏览器页面刷新后丢失的原因，这是由于浏览器的内存清理机制。为了解决这个问题，文章提出了使用sessionStorage来持久化存储Vuex的状态。在vuex的state中初始化数据时从sessionStorage获取，同时在mutations中更新状态时同步存储到sessionStorage。此外，文章还介绍了如何在不使用及使用getters的情况下在组件中获取和设置mainTabs的状态。

摘要由CSDN通过智能技术生成

为什么刷新页面vuex数据会丢失

参考文章
js的数据都是保存在浏览器的堆栈内存里面的，刷新浏览器页面，以前堆栈申请的内存被释放，这就是浏览器的运行机制，堆栈里的数据自然就清空了

解决方式

使用sessionStorage

vuex结构

在这里插入图片描述

main.js

import store from '@/store'

common.js

解决办法：将数据存到sessionStorage中

export default{
	state:{
	    // 初始化时，缓存中没有myTabs，给初始值空；
	    // 缓存中有myTabs时，刷新之后从缓存中获取myTabs
		mainTabs:JSON.parse(window.sessionStorage.getItem("myTabs")) || []
	},
	mutations:{
		updateMainTabs(state, tabs) {
		      // 触发方法时改变mainTabs的值
		      state.mainTabs = tabs;
		      // 将值存在缓存中，刷新时从缓存中获取
      		window.sessionStorage.setItem("myTabs", JSON.stringify(tabs));
    	},
	}
}

不使用getters

index.js

import Vue from "vue";
import Vuex from "vuex";
import common from "./modules/common";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    common,
  },
});

使用：获取mainTabs（html：{{mainTabs}}、js：this.mainTabs）

computed:{
	mainTabs: {
      get() {
        return this.$store.state.common.mainTabs;
      },
      set(val) {
        this.$store.commit("common/updateMainTabs", val);
      },
    },
}

使用：设置mainTabs

computed:{
	mainTabs: {
      get() {
        return this.$store.state.common.mainTabs;
      },
      set(val) {
        this.$store.commit("common/updateMainTabs", val);
      },
    },
}
methods:{
	xx(){
		let tab
		this.mainTabs=this.mainTabs.concat(tab)
	}
}

使用getters

index.js

import Vue from "vue";
import Vuex from "vuex";
import common from "./modules/common";
import getters from "./getters";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    common,
  },
  getters
});

getters.js

const getters = {
  mainTabs: state => state.common.mainTabs
};
export default getters;

使用：获取mainTabs（html：{{mainTabs}}、js：this.mainTabs）

import {mapGetters} from 'vuex'
computed:{
	...mapGetters(['mainTabs'])//可以写多个
}

使用：设置mainTabs

import {mapGetters} from 'vuex'
computed:{
	...mapGetters(['mainTabs'])//可以写多个
}
methods:{
	xx(){
		let tab
		let arr=this.mainTabs.concat(tab)
		this.$store.commit("common/updateMainTabs", arr);
	}
}