使⽤vuex解决刷新页⾯state数据消失的问题记录
sessionstorage和localstorage
在实际的vue项⽬中，当我们的应⽤遇到多个组件之间的共享问题时，通常会⽤到Vuex（⼀个状态管理的插件，可以解决不同组件之间的数据共享和数据持久化），解决组件之间同⼀状态的共享问题。
因⼦：
Vuex优势：相⽐sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。
Vuex劣势：在刷新页⾯后，vuex会重新更新state，所以，存储的数据会丢失。
⾔⽽总之：
实际问题：在vue项⽬中，使⽤Vuex做状态管理时，调试页⾯时，刷新后state上的数据消失了，该如何解决？
解决思路：将state中的数据放在浏览器sessionStorage和localStorage
解决办法：
存储到localStorage
通过监听页⾯的刷新操作，即beforeunload前存⼊本地localStorage，页⾯加载时再从本地localStorage读取信息
在App.vue中加⼊下⾯代码
created(){
//在页⾯刷新时将vuex⾥的信息保存到localStorage⾥
window.addEventListener("beforeunload",()=>{
localStorage.setItem("messageStore",JSON.stringify(this.$store.state))
})
//在页⾯加载时读取localStorage⾥的状态信息
使⽤vuex-persistedstate 插件
安装插件：npm install vuex-persistedstate --save
配置：
在store的index.js中，⼿动引⼊插件并配置
import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
// ...
plugins: [createPersistedState()]
})
该插件默认持久化所有state，当然也可以指定需要持久化的state：
import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
// ...
plugins: [createPersistedState({
storage: window.sessionStorage,
reducer(data) {
return {
// 设置只储存state中的myData
myData: Data
}
}
})]
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。