Vue 플러그인을 만들어서 반복되는 import를 막아보자..

플러그인을 사용해야 하는 이유

아래와 같이 Chart.js를 활용한 차트 컴포넌트가 있는데, 각 차트의 형태별로 여러개의 컴포넌트가 존재한다고 하면,
여러개의 차트 컴포넌트들이 동일한 레벨 내에서 화면이 보여야 할 땐, import Chart를 비효율적으로 불러오게 된다.
이러한 단점을 해결 할 수 있는 방법이 플러그인이다.

차트 컴포넌트

<template>
    <canvas ref="lineChart" id="myChart02"></canvas>
</template>

<script>
import { Chart } from "chart.js";

export default {
    mounted() {
        //   var ctx = document.getElementById("myChart").getContext("2d"); <- before
        var ctx = this.$refs.lineChart.getContext("2d");

        var chart = new Chart(ctx, {
            // The type of chart we want to create
            type: "line",

            // The data for our dataset
            data: {
                labels: [
                    "January",
                    "February",
                    "March",
                    "April",
                    "May",
                    "June",
                    "July",
                ],
                datasets: [
                    {
                        label: "My First dataset",
                        backgroundColor: "rgb(255, 99, 132)",
                        borderColor: "rgb(255, 99, 132)",
                        data: [0, 10, 5, 2, 20, 30, 45],
                    },
                ],
            },

            // Configuration options go here
            options: {},
        });
        console.log(chart);
    },
};
</script>

동일한 레벨에서 여러개의 차트를 불러오는 부모 컴포넌트

<template>
    <div>
        <h2>Chart.js</h2>
        <BarChart />
        <LineChart />
    </div>
</template>

<script>
import BarChart from "@/components/BarChart.vue";
import LineChart from "@/components/LineChart.vue";

export default {
    components: {
        BarChart,
        LineChart,
    },
};
</script>

플러그인 사용방법

src/plugins/ChartPlugn.js

import { Chart } from "chart.js";

export default {
    install(Vue) {
        Vue.prototype.$_Chart = Chart;
    },
};

간단하게 말해서 install(Vue){} 문법 안에 내용은 $_Chart라는 이름으로 import한 Chart를 가져오겠다는 뜻이다.
하지만 이렇게만 만들어주고 this.$_Chart를 가리킨다고 사용할 수는 없다.
Vuex와 router를 사용했을 때 처럼, Vue 인스턴스 전체에서 사용한다는 뜻인, use() 메소드를 사용해서 export한 만든 플러그인을 인자로 넘겨야한다.

main.js

import Vue from "vue";
import App from "./App.vue";
import ChartPlugin from "./plugins/ChartPlugin";

Vue.config.productionTip = false;

Vue.use(ChartPlugin); // <- 바로 여기!!!!! #$@^$%#&@^$%&^#@%$^&#@%&^$#%&^

new Vue({
    render: (h) => h(App),
}).$mount("#app");

플러그인 사용

Chart를 플러그인으로 만들어서 사용하기 때문에 더이상 컴포넌트마다 import를 할 필요 없이
Vue 인스턴스에서 Chart를 명시해준 이름으로 언제든지 어디서든 가져올 수가 있게 되었다.

<template>
    <div>
        <canvas ref="barChart" id="myChart01" width="400" height="400"></canvas>
    </div>
</template>

<script>
// import { Chart } from "chart.js";

export default {
    mounted() {
        var ctx = this.$refs.barChart.getContext("2d");
        var myChart = new this.$_Chart(ctx, { // <- 바로 여기!!!!! #$@^$%#&@^$%&^#@%$^&#@%&^$#%&^
            type: "bar",
            data: {
                labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                datasets: [
                    {
                        label: "# of Votes",
                        data: [12, 19, 3, 5, 2, 3],
                        backgroundColor: [
                            "rgba(255, 99, 132, 0.2)",
                            "rgba(54, 162, 235, 0.2)",
                            "rgba(255, 206, 86, 0.2)",
                            "rgba(75, 192, 192, 0.2)",
                            "rgba(153, 102, 255, 0.2)",
                            "rgba(255, 159, 64, 0.2)",
                        ],
                        borderColor: [
                            "rgba(255,99,132,1)",
                            "rgba(54, 162, 235, 1)",
                            "rgba(255, 206, 86, 1)",
                            "rgba(75, 192, 192, 1)",
                            "rgba(153, 102, 255, 1)",
                            "rgba(255, 159, 64, 1)",
                        ],
                        borderWidth: 1,
                    },
                ],
            },
            options: {
                scales: {
                    yAxes: [
                        {
                            ticks: {
                                beginAtZero: true,
                            },
                        },
                    ],
                },
            },
        });

        console.log(myChart);
    },
};
</script>