最近在整理项目,想了解一下VUE这个前后端分离的框架,这里没有顺序,遇到什么就写写,目的只是为了给自己加深印象和交流指正之用。

谈到export const,就有必要说到export default,那么这两个有什么区别呢?

在一个vue文件中export const可以有多个,但是export default只有且仅有一个;比如:

//demo1.js
// a
export const a = (params) => {
    return axios({
        method: 'post',
        url: '/api/a/b.json',
        data: qs.stringify(params)
    })
}
// b
export const b= (params) => {
    return axios({
        method: 'post',
        url: '/api/a/b.json',
        data: qs.stringify(params)
    })
}

// c
export const c= (params) => {
    return axios({
        method: 'post',
        url: '/api/a/b.json',
        data: qs.stringify(params)
    })
}

在vue页面中可以引用多个,

//demo.vue
import {a} from 'demo1'
import {b} from 'demo1'
import {c} from 'demo1'
或
import {a,b,c} from 'demo1'

此时可以在页面中直接使用,

      //demo.vue   
      getA(dateType) {
                const self = this;
                //这里可以直接使用a
                a({dateType:dateType}).then(res => {
                    if (res.data.returnCode === 0) {
                        const returnData = res.data.returnData;
                        const x= returnData.xAxisDataList;
                        const ya= returnData.yAxisOrderNumDataList;
                        const yb= returnData.yAxisSalesPriceDataList;
                        const sg= returnData.seriesSaleGross;
                        const legend = {
                            data:['1','2','3'],
                            bottom: 'bottom',
                        }
                 }
           }
     }

而export default的使用为:

//demo.vue
export default {
        name: 'index',
        data() {
            return {
                menuDataLimit:{},
//                展示1
                todaySituation: {
                    orderNum1: '',
                    price1: '',
                    buyNum1: '',
                    buyPrice1: ''
                },
//                展示2
                wholeSituation: {
                    orderNum2: '',
                    price2: '',
                    buyNum2: '',
                    buyPrice2: ''
                }
          }
       }
}

当然,这里是直接在页面中写的,如果是外部引用的话,是这样:

import dea from 'demo1' //导入的时候可以给这个模块任意取名字,且不需要用花括号

就到这里吧,欢迎指正!

Logo

前往低代码交流专区

更多推荐