多次导入作为参考导入的同一文件，而不是复制

我有几个 vuejs 报告组件。我的目的是使用一个通用的配置对象来创建一些全面的一致性，然后在每个图表的基础上进行扩展。我遇到的问题是，当 1 个图表“扩展”配置时，它会影响其他图表。

例如，一个组件包含以下 JS 对象，该对象添加了用于将标签格式化为 USD 的回调。

        defaultOptions.options.tooltips = {
            mode: 'index',
            intersect: false,
            callbacks: {
                label: function(tooltipItem, data) {
                    // Prefix the tooltip with a dollar sign
                    return DefaultGraphOptions.formatLabelToDollars(tooltipItem.yLabel);
                }
            }
        };

...但这会影响页面上的所有图表，而不仅仅是包含财务的图表。

默认图形选项

export default {
    options: {
        scales: {
            xAxes: [{
                display: true,
            }],
            yAxes: [{
                display: true,
                ticks: {
                    callback: (label) => {
                        // format all numbers with commas
                        let formatter = new Intl.NumberFormat('en-US');
                        return formatter.format(label);
                    }
                }
            }]
        },
        tooltips: {
            callbacks: {
                label: (tooltipItem, data) => {
                    // Format all tooltip figures with commas and such if they're larger numbers
                    let formatter = new Intl.NumberFormat('en-US');
                    return formatter.format(tooltipItem.yLabel);
                }
            }
        }
    },
    formatLabelToDollars: (value) => {
        if(parseInt(value) >= 1000){
            return '$' + parseInt(value).toLocaleString();
        } else {
            return '$' + value;
        }
    },
    cancellationReasonColors: () => {
        return [
            Colors.TEAL,
            Colors.BLUE,
            Colors.ORANGE,
            Colors.PURPLE,
            Colors.YELLOW,
            Colors.LIME
        ];
    }
}

这是组件：

import { Bar } from 'vue-chartjs'
import DefaultGraphOptions from './graph-defaults';
import * as Colors from './colors';

export default {
    extends: Bar,
    data () {
        return {
            labels: [
                {
                    label: 'Stripe Annual',
                    borderColor: Colors.PURPLE,
                    backgroundColor: Colors.PURPLE,
                },
                {
                    label: 'Stripe Monthly',
                    borderColor: Colors.YELLOW,
                    backgroundColor: Colors.YELLOW,
                },
                {
                    label: 'Paypal Annual',
                    borderColor: Colors.LIME,
                    backgroundColor: Colors.LIME,
                },
            ],
        }
    },
    mounted () {
        // All components clone this object in this way
        let defaultOptions = {... DefaultGraphOptions};

        defaultOptions.options.title = {
            display: true,
            text: 'Sales'
        };

        // Give us summarized tooltips (showing all data sets together)
        defaultOptions.options.tooltips = {
            mode: 'index',
            intersect: false,
            callbacks: {
                label: function(tooltipItem, data) {
                    // Prefix the tooltip with a dollar sign
                    return "$" + tooltipItem.yLabel.toFixed(2);
                }
            }
        };

        this.renderChart(DefaultGraphOptions.fromDailyStats(window.salesGrowth, this.labels), defaultOptions.options)
    }
}

如何DefaultGraphOptions在每个 vuejs 组件上使用导入的克隆，以便一个配置不会影响另一个？我的理解是let objClone = { ...obj };会创建一个 js 对象的克隆