uni-app如何用JS动态修改scss样式变量

$uni-head: var(--uni-head, 44px); // 默认值 44px
$paging-head-top: var(--paging-head-top, 88px); // 默认值 88px

// 通过 User Agent中是否含有有Html5Plus、uni-app、app判断 嵌入到哪个环境中：
if (!uni.getSystemInfoSync().ua.includes('app')) { // 嵌入到h5
  document.getElementsByTagName('body')[0].style.setProperty('--uni-head', '0');
  document.getElementsByTagName('body')[0].style.setProperty('--paging-head-top', '44px');
}

// 或者通过 window.plus 判断: 
if(window.plus){ // 存在则是嵌入到APP

}else{ // 不存在则是其他环境 

}

// 在 Vuex store 中定义
const store = new Vuex.Store({
    state: {
        styleVars: {
            uniHeight: '44px', // 默认值
        },
    },
    mutations: {
        setStyleVar(state, { key, value }) {
            state.styleVars[key] = value;
        },
    },
});

<template>
    <view :style="{ height: heightVar }">
        <!-- 组件内容 -->
    </view>
</template>

<script>
export default {
    computed: {
        heightVar() {
            return this.$store.state.styleVars.uniHeight;
        },
    },
};
</script>

Vue.prototype.uniHeight = store.state.styleVars.uniHeight;
// 通过 User Agent中是否含有有Html5Plus、uni-app、app判断 嵌入到哪个环境中：
if (!uni.getSystemInfoSync().ua.includes('app')) { // 嵌入到h5
  // 更新全局样式变量
  Vue.prototype.$store.commit('setStyleVar', { key: 'uniHeight', value: '0px' });
}

<template>
    <view :style="{ height: uniHeight }">
        <!-- 组件内容 -->
    </view>
</template>

this.$store.commit('setStyleVar', { key: 'uniHeight', value: '0px' });