vuex-刷新页⾯state 数据消失
vuex-刷新页⾯state 数据消失
⼀、Vuex ⼀个状态管理的插件，可以解决不同组件之间的数据共享和数据持久化，解决组件之间同⼀状态的共享问题。
Vuex 优势：相⽐sessionStorage ，存储数据更安全，sessionStorage 可以在控制台被看到。
Vuex 劣势：在刷新页⾯后，vuex 会重新更新state ，所以，存储的数据会丢失。
⼆、实际问题
在vue 项⽬中，使⽤Vuex 做状态管理时，调试页⾯时，刷新后state 上的数据消失了，该如何解决？
消失的原因：因为store 的数据是保存在运⾏内存中，当页⾯刷新时，页⾯会重新加载vue 实例，store ⾥⾯的数据就会被重新赋值
解决思路：将state 中的数据放在浏览器sessionStorage 和localStorage
三、解决办法⼀：存储到localStorage/sessionStorage
通过监听页⾯的刷新操作，即beforeunload 前存⼊本地localStorage，页⾯加载时再从本地localStorage 读取信息
在App.vue 中加⼊下⾯代码，以localStorage 为例：created(){
//在页⾯刷新时将vuex ⾥的信息保存到localStorage ⾥ window.addEventListener("beforeunload",()=>{ localStorage.setItem("messageStore",JSON.stringify(this.$store.state)) })
//在页⾯加载时读取localStorage ⾥的状态信息 Item("messageStore") &&this.$placeState(Object.assign(this.$store.state,JSON.Item("messageStore"))));}
问题1：⼜需要使⽤localStorage/sessionStorage ，为什么不直接使⽤localStorage/sessionStorage ，要使⽤vuex 呢
vuex 中的变量是响应式的，⽽localStorage 和sessionStorage 都不是响应式
当你改变vuex 中的状态，组件会检测到改变，⽽localStorage 和sessionStorage 就不会了，页⾯要重新刷新才可以看到改变
所以应让vuex 中的状态从localStorage/sessionStorage 中得到，这样组件就可以响应式的变化
问题2：存储到localStorage/sessionStorage 的区别
sessionStorage ，关闭窗⼝，数据消失
localStorage ，关闭窗⼝，数据也还在，除⾮将它移除
四、解决办法⼆：使⽤vuex-persistedstate 插件
安装插件： npm install vuex-persistedstate
配置：在vuex 初始化时候，作为组件引⼊。/******store/index.js******/import createPersistedState from 'vuex-persistedstate'export default new Vuex.Store({ //...
//没有设置是存储所以数据 plugins: [createPersistedState()]
})设定存储特定数据：plugins: [createPersistedState({ storage: window.sessionStorage, reducer(data) { return {
// 设置只储存state 中的address
address: data.address >####
}
}
})]
⾃定义存储⽅式：
vuex-persistedstate默认存储到localStorage。
需要使⽤sessionStorage的情况
plugins: [
createPersistedState({
storage: window.sessionStorage
})
]
使⽤cookie的情况
需要安装cookies插件
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
export default new Vuex.Store({
plugins: [
createPersistedState({
storage: {
getItem: key => (key),
setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
removeItem: key => ve(key)
}
})
]
})
sessionstorage和localstorage##
五、解决办法三：使⽤vuex-along 插件
安装插件： npm install vuex-along
配置：在vuex初始化时候，作为组件引⼊。
import createVuexAlong from 'vuex-along'
export default new Vuex.Store({
//...
/
/没有设置是存储所以数据
plugins: [createVuexAlong ()]
})
⾃定义存储⽅式：
vuex-along默认存储到localStorage
plugins: [
createVuexAlong ({
name: "hello-vuex-along", // 设置保存的集合名字，避免同站点下的多项⽬数据冲突 local: {
list: ["address"],
isFilter: true // 过滤模块 address数据，将其他的存⼊ localStorage
},
session: {
list: ["address.city"] // 保存 address.city到 sessionStorage
}
//如果对于sessionstorage不进⾏任何操作，也可将session设为false })
]
学习转⾃：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
前端开发中的数据可持久化与离线存储技术
« 上一篇
JavaScript的本地存储
下一篇 »
发表评论