[VUE] SCRIPT 구성

간단하게 vue 페이지 에서 사용 되는 script 구성을 작성해보았다.

 

// import
import { mapGetters } from 'vuex'
import testComponent from '@/view/testComponent'
 
export default {
    name: 'name',
    created () { // 인스턴스가 생서된 후 동기적 호출 
    },
    mounted () { // 인스턴스가 마운트 된 후 호출
        this.testFunc()
        this.....
    },
    components: {
        testComponent,
        ...
    },
    computed: { // 데이터를 보다 간결하게 사용 가능. -> .vue 에서 :data="testComputed"
        testComputed () {
            ...
        }
    },
    props: { // 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달할 때 사용되는 단방향 데이터 전달 방식
        dayjsDF: {
            type: Object,
            default () {
                return this.$store.state.app.viewDateFormat.dayjs
            }
        }
    },
    methods: {
        async testFunc () {
            try {
                this.param = {
                    data: this.data,
                    ....
                }
                let data = await ...
            }
        }
    },
    data () {
        return { // data, gridColumns .. 등등 vue 에서되는 모든 model 선언
            data: undefined,
            param: [],
            columns: [],
            ....
        }
    }
}