vuex页面数据丢失_解决 vuex 中的数据在页面刷新之后就丢失的问题

在vue的项目中我们一般都会使用到vuex,在vuex中我们会保存一个需要全局使用的变量或者状态,这样方便我们使用。但是vuex的store中的数据有一个特性,那就是在页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值,这样就会出现页面刷新vuex中的数据丢失的问题。

下面是个人总结的一些解决这个问题的方法:

1、利用js存储技术(localStorage、sessionStorage、cookie)来进行处理

2、使用一些vue的插件,例如 vuex-persistedstate ,实际上其根本原理就是将vuex中的state存在 localStorage或者sessionStorage中,在页面刷新之后vuex在从 localStorage中把数据拿回来

这里我分别说明一下这2中方法的使用方式:

第一种:(个人推荐使用)

在App.vue中写上这几行代码,

//在页面加载时读取sessionStorage里的状态信息

if (sessionStorage.getItem("store") ) {

this.$store.replaceState(Object.assign({},this.$store.state,JSON.parse(sessionStorage.getItem("store"))))

}

//在页面刷新时将vuex里的信息保存到sessionStorage里

window.addEventListener("beforeunload",()=>{

sessionStorage.setItem("store",JSON.stringify(this.$store.state))

})

这样就能在页面刷新时把store的数据存到sessionStorage中,并且在页面加载时及时获取到数据。

这里之所以使用sessionStorage,是因为sessionStorage的存在时间是当页面打开时存在,页面一关闭就会自动清除,能保证下次一进来页面使用的仍是新数据,不是上次存储的数据。

第二种:

首先安装插件,

npm install vuex-persistedstate --save

然后在store的index.js中写上下面这些代码

import createPersistedState from "vuex-persistedstate"

const store = new Vuex.Store({

// ...

plugins: [createPersistedState()]

})

此时可以使用sessionStorage 把数据存储起来,

import createPersistedState from "vuex-persistedstate"

const store = new Vuex.Store({

// ...

plugins: [createPersistedState({

storage: window.sessionStorage

})]

})

这样我们就把vuex中的数据存储起来了,同样我们在页面加载时再次把sessionStorage中的数据存到vuex中,就可以了。

其实这2种方法的本质是一样,而且第一种方法的代码少,还不用下载插件,个人推荐使用这样。

你可能感兴趣的:(vuex页面数据丢失)