vue3踩坑记录

patch-package 插件

再也不需要你2次修改node_modules

下载

 npm i patch-package -D

配置

在package.json中添加postinstall

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "postinstall": "patch-package"
}

使用

举个例子，安装我要的修改的包

npm install @jiaminghi/data-view

在shims-vue文件配置

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

// 定义声明
declare module '@jiaminghi/data-view'

跑起来后我们可以看到报错了

去node-model修改完成后，执行命令

npx patch-package @jiaminghi/data-view

接着可以看到生成的patches文件夹，里面我们修改的文件已经有记录了

其他人install之后再次报错，执行指令npm run postinstall就行

axios请求类型

1.json

直传就行,content-type配置

'Content-Type': 'application/json',

2. Query String Parameters

需要在传值的时候配送一个params对象，而paramsData就是要传输的值

.get(url, {params: paramsData})

3. Form Data

直接用表格提交就行，如果不是表格则需要修改content-type

Content-type: 'multipart/form-data'

setup记录

子组件传值父组件

emits: ["refreshDataList"],
setup(props, context) {
  let refreshDataList = () => {
    context.emit("refreshDataList");
  };
  return {
    refreshDataList
  };
},

获取props传值

props: [
  'echartsId',
  'eWidth',
  'eHeight',
  'theme',
  'options',
  'lineColor'
],
setup(props) {// 在setup中获取props的值
 console.log('props', props.echartsId, props.eWidth)
  
},

获取vuex数据

setup(){
  const store = useStore ();
  // console.log('测试', store.getters.modeFlag)
  return {
    barTitle:computed(() => store.getters.barTitle)
  }
},

可观察的setup自定义属性

setup(props) {
  let docEcharts = ref();
  docEcharts.value = 0
  docEcharts.value ++
  return {
    docEcharts,
  }
},

ref和reactive

ref和reactive创建的响应式变量，不能进行解构或展开，否则变量将失去响应效果

如果要创建响应式的对象, 需要通过toRefs转一下

// 获取统计图数据
interface eleInf {
  params: any,
  http: any,
  getEleData(): Promise<void>,
}
const eleData:eleInf = reactive({
  http : inject('$http'),
  params : {
    startTime: value1.value[0],
    endTime: value1.value[1],
    addressId: addressId
  },
  getEleData: async () => {
    const res =  await eleData.http.axiosPost('/energy/electricity/list', eleData.params)
    if (res.code === 200) {
      options.value.xAxis.data = res.data.x;
      options.value.series[0].data = res.data.y;
      totalElectricity.value = res.data.totalElectricity
    }
  },
});

const eleDataRefs = toRefs(eleData);

reactive创建的对象，无法对时间属性进行控制

只能通过重新赋值，来修改属性

value1.value = [
  moment(e[0]).format('YYYY-MM-DD'),
  moment(e[1]).format('YYYY-MM-DD'),
];
console.log('当前时间', e, value1.value)
eleData.params.startTime = value1.value[0];
eleData.params.endTime = value1.value[1];