Question

我有几个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);
                }
            }
        };

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

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

以下是组件：

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

如何在每个vuejs组件上使用导入的DefaultGraphOptions作为克隆，这样一个配置不会影响另一个？据我了解，let objClone = { ...obj };将创建js对象的克隆

Answer 1

导出方法而不是对象。这称为工厂模式。

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

import createFoo from 'foo'

const foo = createFoo()

这正是Vue的data必须是函数的原因。

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

1 个答案: