前言
最近在学习Vue3，现在来说一下自己的学习感受，并且分享一些小知识点。
可能这些知识点并不是那么属于Vue3的知识范畴，但是这是我在学习过程中遇到并且记录下来的，对于我而言，是Vue3让我遇到了这些知识，哈哈哈哈，我就这么归类辣！
感想
这次使用的是Vite，之前都是用的vue-cli，Vite使用起来就一个字，快！
认真的去做一个自己的全栈项目，所以能封装起来用的地方，都尽量去封起来了，减少以后的代码量。
后端使用的是koa，也是第一次自己尝试去写后端。等这个项目写完，会继续分享一些踩坑小技巧的。
开始了，奇奇怪怪的小知识
配置config
我们的请求地址通常应该会有三种，在前后端开发分离的情况，第一种就是mock地址，方便我们在没有后端的情况下进行前端开发，第二种是测试地址，也就是后端写好了之后，我们请求的从mock地址变成了后端写好后挂载的服务地址，最后，当测试没问题了，部署到线上，我们请求的就是部署好的线上地址了。
所以文件中的三种环境分别与开发环境，测试环境和部署环境相对应。
mock的重要性，我觉得mock很重要，他可以帮助我们在没有后端的时候，依据接口文档进行前端开发并测试。
以下为程序介绍： 默认是生产环境 prod，如果有值就赋值到env变量上，当做当前的环境变量。
最后将EnvConfig以解构的方式导出，方便根据当前环境直接调取两种Api
const env = import.meta.env.MODE || 'prod'
const EnvConfig = {
dev:{
baseApi:'',
mockApi:''
},
test:{
baseApi:'',
mockApi:''
},
prod:{
baseApi:'',
mockApi:''
}
}
export default {
env:env,
mock:true,
...EnvConfig[env]
}关于storage
大家都应该很熟悉了，他可以与jwt token联系起来，来做一些权限的操作，或者当我们的数据需要跨组件共享的时候，也会用到它。
跨组件数据共享： 在Vue中使用Vuex，但是存在一个问题，因为数据此时存在js内存中，页面刷新后数据就会丢失，所以我们用Vuex和storage联合起来完善此功能。
下面是对storage进行封装，方便自己使用：
它自身带的api好像不支持清除单独的数据，只能全清理掉，所以我特意封装了个单独的emm，希望不是我没注意到它自带，那就哭了。
- setItem()
- getItem()
- clearItem()
- clearAll()
import config from './../config'
export default {
setItem(key,val){
let storage = this.getStorage()
storage[key] = val
window.localStorage.setItem(config.namespace,JSON.stringify(storage))
},
getItem(key){
return this.getStorage()[key]
},
getStorage(){
return JSON.parse(window.localStorage.getItem(config.namespace)) || "{}"
},
clearItem(key){
let storage = this.getStorage()
delete storage[key]
window.localStorage.setItem(config.namespace,JSON.stringify(storage))
},
clearAll(){
window.localStorage.clear()
}
}写在最后
要一直在路上呀！加油！点个赞，一起努力加油吧♥
