配置config和封装storage

前言

最近在学习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()
    }
}

写在最后

要一直在路上呀！加油！

点个赞，一起努力加油吧♥