这是我参与「第四届青训营 」笔记创作活动的第8天
解决删除项目时的刷新问题
对已渲染的后端数据进行删除后，页面不会立刻刷新显示删除后的数据。此时，需要手动刷新，但是如果直接重新调用后端接口，对数据重新渲染，则会导致一段页面空白时间，用户体验感较差。要解决这个问题，可以使用provide/inject的结合方式改进。
1.修改APP.vue
<template>
<div id="app">
<router-view v-if="isRouterAlive"/>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isRouterAlive: true
};
},
provide() {
return {
reload:this.reload
}
}
methods: {
reload() {
this.isRouterAlive = false
this.$nextTick(() => {
this.isRouterAlive=true
})
},
}
};
</script>
<style>
</style>
2.在需要的页面中使用它
<script>
export default {
inject:['reload'],
methods: {
// 删除项目
async deleteProject(templateid) {
try {
await this.$store.dispatch('MyProject/deleteProject', templateid)
this.reload()
} catch (error) {
toast('请登录！')
}
},
}
</script>
慎用onbeforeunload清除浏览器localStorage中的数据
在登录后，我们会将用户数据的一些消息存入浏览器localStorage中为用户的后续使用进行支持。然后当我们在关闭网站时，我们希望清除所有的localStorage中的数据，上网查找后会有以下这个函数，在关闭浏览器的窗口时清除缓存在localStorage的数据。但是，这个关闭指的不仅是关闭网站还指刷新网站，这意味着如果用户时因为网络或者其它因素刷新网站，则会使得localStorage中数据丢失，从而网站报错无法使用。
// 关闭浏览器窗口的时候清空浏览器缓存在localStorage的数据
window.onbeforeunload = function (e) {
var storage = window.localStorage;
storage.clear()
}
实用的滚动条透明效果
在vue项目中，我们获取到后端数据进行渲染时，由于数据较多，大部分情况下我们会产生滚动条。但是自带滚动条的样式和我们的项目并不匹配，此时我们可以讲滚动条的样式修改为透明。
// 滚动条透明
.formWork::-webkit-scrollbar {
height: 0;
width: 0;
color: transparent;
}
