前景：在我们编写css样式中，是不能直接使用vue data中的变量的。那么如果我们想在css中使用全局变量，怎么做呢？ 如下

1. 第一步，给style赋值一个计算属性

<div :style="uploadStyle" class="upload-box"/>

2. 第二步，computed中定义 uploadStyle

computed: {

    ...mapState({
      theme: state => state.settings.theme
    }),

    uploadStyle() {
      return {
        '--border-color': this.theme,
      }
}

3. 第三步，在<style>中 使用var()函数读取computed中定义的变量即可

<style scoped lang="scss">
    .upload-box {
         border: 1px solid var(--border-color);
    }
</style>