今天完成的事情:
1.利用localStorage将需要保存的数据保存到浏览器的缓存里面，解决了页面刷新、关闭当前页面或关闭浏览器导致正在使用的数据、用户数据丢失的问题。
当页面刷新或者关闭的时候会执行onbeforeunload事件，通过监听beforeunload事件绑定一个mutation,用这个mutation来执行localStorage.setItem的操作
window.addEventListener('beforeunload' , () => {//当浏览器刷新的时候或者关闭的时候把vuex里面需要保存的数据保存到浏览器的缓存里
this.$store.commit('setLocalStorageData')
})
setLocalStorageData(state) {//把页面上的数据保存到浏览器里面,在特定时候执行这个mutation，用来更新localstorage中储存的数据。 to do 做日历！！！！！！
state.localStorageData = {
userName: state.username,
roleName: state.roleName,
beclickBtn: state.beclickBtn,
articleListType: state.vxType,
articleListSize: state.vxSize,
picPreview: state.picPreview,
articleTitle: state.theTitle,
articleType: state.theType,
articleIndustry: state.articleIndustry,
articleContent: state.theContent,
articleUrl: state.theUrl,
compileStatus: state.compileStatus,
piClass: state.piClass,
previewText: state.previewText,
itemsMessage: state.itemsMessage,
}
localStorage.setItem('localStorageData' , JSON.stringify(state.localStorageData))
},
在APP.vue的create里面调用
this.$store.commit('localStorageData' , JSON.parse(localStorage.getItem('localStorageData')))//把浏览器缓存中的数据保存到vuex中
把缓存中的数据储存到vuex中以便打开浏览的时候读取数据并显示。
这样就解决掉了刷新页面数据丢失的问题，
2.解决一些逻辑问题，比如监听route.path或者在登陆页面的create做判定，如果有用户数据则跳过登陆页面直接进入欢迎页面，再有就是如果处在后台页面，但是检测不到用户数据强制返回登陆页面。
computed: {//获取当前的路由url
getRoutePath() {
return this.$route.path
},
},
watch: {//简体路由url变化，然后执行一些操作
getRoutePath(val) {
if(val == '/userset' && !this.$store.state.compileStatus) {
this.$store.commit('cancel')
}else if(val == '/userset' && this.$store.state.compileStatus) {
console.log('编辑状态')
}
}
}
created() {
let localStorageData = JSON.parse(localStorage.getItem('localStorageData'))
if(!(localStorageData.userName && localStorageData.roleName)) {
this.$router.push('/login')
}
},
created() {
let localStorageData = JSON.parse(localStorage.getItem('localStorageData'))
if(localStorageData.userName && localStorageData.roleName) {//进入登陆页面的时候如果有数据信息则跳转到欢迎页，考虑用退出功能来检测是否生效，退出按钮点击之后还原信息
this.$router.push('/welcome')
}
}
3.在登陆成功的时候调用localStorage.setItem，把用户信息加入缓存从而配合（2.）的逻辑
methods: {
SignInclick() {
let mydata = {
name:this.username,
pwd:this.password
}
axios.post('/api/a/login',qs.stringify(mydata))
.then(res => {
if(res.data.code == 0) {
this.$store.commit('getUserName' , res.data.data)
this.$store.commit('setLocalStorageData')
this.$router.push('/welcome')
}else {
this.ResponseText = res.data.message
}
})//如果通过调用 回调函数的方式来写这一部分会导致this指向错误。this实际是undefine，而箭头函数则不同，箭头函数不是函数调用，this指向的是调用它的对象
}
},
明天要做的事情：
现在type=3的时候还有一点逻辑问题，改善一下。然后继续写日历
返回列表
评论