Vue - 可重用的类对象

Question

如果我在组件中绑定了对象样式，并且想使用相同的对象在另一个组件中绑定样式，那么我可以将这些对象提取到可重用的组件或文件中吗？像这样的：

styles.vue

<script setup>

const flexColumn = {
    "d-flex": true,
    "flex-column": true,
};
const rowMB5 = {
    row: true,
    "mb-5": true,
};

const rowMT5 = {
    row: true,
    "mt-5": true,
};

const rowItemsCenter = {
    row: true,
    "align-items-center": true,
};

const fs08LightGrayish = {
    fontSize08Rem: true,
    colorLightGrayish: true,
};

const fs09LightGrayish = {
    fontSize09Rem: true,
    colorLightGrayish: true,
};

const blackishBold = {
    colorBlackish: true,
    "fw-bold": true,
};
const btnPrimary = {
    btn: true,
    "text-white": true,
    bgBluish: true,
    "fw-bold": true,
    fontSize09Rem: true,
};

const blueishBoldFs09 = {
    fontSize09Rem: true,
    "fw-bold": true,
};

const colMD2BlueishBold09 = {
    "col-md-2": true,
    colorBlueish: true,
    "fw-bold": true,
    fontSize09Rem: true,
};

const colMD3Fs08 = {
    fontSize08Rem: true,
    "col-md-3": true,
};

const colMd3FlexEvenlyCenter = {
    "col-md-3": true,
    "d-flex": true,
    "align-items-center": true,
    "justify-content-between": true,
};

const coldMD4flexColumnGap3 = {
    "col-md-4": true,
    "d-flex": true,
    "flex-column": true,
    "gap-3": true,
};

const colMD3FlexJustifyEndFs09Bold = {
    "col-md-3": true,
    "d-flex": true,
    colorBlackish: true,
    "justify-content-end": true,
    fontSize09Rem: true,
    "fw-bold": true,
};

const colMD4Fs08 = {
    "col-md-4": true,
    fontSize08Rem: true,
};

const colMD5UpcomingEvent = {
    "col-md-5": true,
    upcomingEvent: true,
};
</script>

然后导出这些对象以实现可重用，这样我就可以在另一个组件中使用它，例如

styles.flexColumn

，这可能吗？

Answer 1

是的，可以使用可组合函数来包装可重用代码，然后公开所需的状态，您可以将其称为

useStyle

并将其放入名为

useStyle.js

的文件中，应使用

reactive

或

ref 声明状态

：

import { ref } from 'vue'

export function useStyle{

const flexColumn = ref({
    "d-flex": true,
    "flex-column": true,
});
//....

//then return the state :

return { 
lexColumn,
//.... the rest
 }
}

然后在您的组件中使用它，例如：

<script setup>
import {useStyle} from 'useStyle'

const { flexColumn } = useStyle()
</script>