同一文件的多次导入作为引用导入,而不是复制

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

例如,一个组件包含以下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对象的克隆