记一次全局配置的妙用

前言：在需要做全局配置的场景，你是否还是在App.vue中调用配置接口，然后存储到localstorage中，然后在各个子页面中，一次次的重新获取呢？你个小趴菜，这么冗余的写法赶紧摒弃掉，今天分享一个mixin的妙用。

config = {
    configBg:"",//背景图片
}

步骤一：创建minxin全局文件

import * as base from "@/assets/js/base.ts";
import api from "@/api";

//先从localStorage中获取之前存储的配置
let config = base.getLocalStorage("GYKJ_BIN_ALLCONFIG")
//如果之前没有配置过就重新通过接口获取一下
if (!config) {
  api.platformConfig({}).then((res)=>{
      config = res.result
      //这边再次存储一次配置
       base.setLocalStorage("GYKJ_BIN_ALLCONFIG"，res.result)
  });
}
export const common = {
    data: () => {
        return {
        //使用解构赋值，让配置中的所有属性都变成data中的双向绑定属性
            ...config
        }
    }
}

说明：这边的关键就是把config对象解构赋值到data函数里面

步骤二：在main中全局引入mixin

// 全局mixin
import { common } from './mixin'
app.mixin(common)

步骤三：在页面中使用

//在template中使用全局配置的背景图片
<div :style="{backgroundImage:`url(${portalCalendarBg})`}"></div>
  
//在css中结合v-bind使用
 .demo {
    background: v-bind(configBg);
 }

说明：在页面中无需再做任何引入，可以简单粗暴直接使用。其中v-bind是sass里面的骚操作，不理解的兄弟，可以自己去了解一下

总结：这个方式的使用场景可以

1. 需要通过全局配置的接口来动态展示的内容

2. 涉及到租户平台、换肤场景

3. 后台做权限控制的时候