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

Question

I have several vuejs reporting components. My intention is to use a common config object to create some consistency across the board and then expand on that on a per-chart basis. The problem I'm running into is that when 1 chart "extends" the configuration, it's impacting others.

For example, one component contains the following JS object which adds a callback for format the label as 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);
                }
            }
        };

...but this impacts all charts on the page, not just the chart that contains financials.

DefaultGraphOptions

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
        ];
    }
}

Here's the component:

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)
    }
}

How can I use the imported DefaultGraphOptions as a clone on each vuejs compnent so one config doesn't impact another? It was my understanding that let objClone = { ...obj }; would create a clone of a js object

Answer 1

Export a method instead of an object. This is known as a factory pattern.

export function createFoo(){
  return {foo:new Date()}
}

import createFoo from 'foo'

const foo = createFoo()

This is exactly why Vue's data must be a function.