vuestoresessionStoragelocalStorage解决http请求异步vuex store：数据存储是响应式的；数据放在内存⾥；⽣命周期是每次刷新会初始化
sessionstorage和localstorage个⼈理解就是store中的数据在发⽣改变后都会同步到所有使⽤的组件中；
⽐如：如果页⾯渲染有依赖这些数据，则会出发重新渲染
缺点：刷新则会初始化
vuex
sessionStorage：会话缓存；存在浏览器⾥，⽣命周期是本窗⼝（⼀个标签页）
sessionStorage仅对当前标签页有效（tab），当打开新的标签页对应的是新标签页的缓存；
关闭tab缓存清空
如果希望对同⼀浏览器共⽤⼀个缓存可选择localStorage
localStorage：本地缓存；存在浏览器，⽣命周期是永久（未⼿动清空）
localStorage对当前浏览器所有tab共⽤⼀个缓存，关闭浏览器不会清缓存只能⼿动清除
⽤法：
vuex-store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// new store对象
const store = new Vuex.Store({
// state 是⽤来存储数据的
state: {
login: 0,
userName: '',
},
// ⽤于数据状态变更, 在使⽤store时通过提交mutation中的⽅法来进⾏数据状态变更
mutations: {
// 登录
login (state, user) {
state.login = 1
state.userName = user.uname
},
// 退出
logout (state) {
state.isLogin = 0
state.userName = ''
}
}
})
export default store
// 提交状态变更
storemit('login', res.data)
sesstioStorage、localStorage
// 清空缓存
sessionStorage.clear()
// 写缓存
sessionStorage.setItem('login', 1)
sessionStorage.setItem('userName', res.userName)
// 取缓存写⼊store
store.state.login = Item('login'))
我们本次要实现：
前端数数据以本地缓存为准，⼀旦缓存清空则请求后端获取
vue渲染以store的数据为准；store⾸先会从缓存取，如果缓存为空了，则请求后端获取
配合store和sessionStorage使⽤，有以下优势
1. 可以很好的实现页⾯渲染时响应式的，也不会存在刷新后store就清空了
2. 同时当ajax或axios 发起http请求时，由于是异步执⾏的缘故 ⽽导致渲染页⾯需要的数据还未初始化

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