My Note

Appearance

Vue Plugin ​

component ​

vxe-table ​

Render-table ​

  • 前端计算table => filter/sort/page
    • 外层触发计算
    • 内部筛选计算
    • 内部排序计算

api ​

vue-request ​

  • useRequest
    • run：手动触发，会自动捕获异常，通过 options.onError 处理
    • runAsync：与 run 用法一致。但返回的是 Promise，需要自行处理异常
    • refresh：使用上一次的 params 重新调用 run
    • refreshAsync：使用上一次的 params 重新调用 runAsync
    • ready 只有当 ready 为 true 时，才会发起请求
    • refreshDeps：当 refreshDeps 里面的内容发生变化时，如果没有设置 refreshDepsAction, 就会触发 refresh 的重新执行。
    • refreshDepsAction：当 refreshDeps 里面的内容发生变化时，会被调用
  • usePagination
html
<n-data-table
  :row-key="(row) => row.id"
  remote
  :loading="loading"
  :columns="columns"
  :data="dataList"
  :pagination="{
    page: current,
    pageSize,
    itemCount: total,
    onUpdatePage: changeCurrent,
    onUpdatePageSize: changePageSize,
    pageSizes: [10, 20, 50, 100],
    showSizePicker: true,
  }"
  :max-height="500"
/>
js
import { usePagination, useRequest } from 'vue-request'
const dataList = ref([])
const {
  current,
  loading,
  pageSize,
  changeCurrent,
  changePageSize,
  run: runGetData,
  total,
} = usePagination(
  (params: Record<'current' | 'size', number>) =>
    getList({
      current: params.current,
      size: params.size,
      param: { boxNo: boxNoModel.value! },
    }),
  {
    defaultParams: [{ current: 1, size: 10 }],
    ready: computed(() => !!boxNoModel.value),
    refreshDeps: () => boxNoModel.value,
    refreshDepsAction: () => {
      runGetData({
        current: 1,
        size: pageSize.value,
      })
    },
    pagination: {
      currentKey: 'current',
      pageSizeKey: 'size',
      totalKey: 'data.total',
    },
    onSuccess(res) {
      dataList.value = res.data.records
    },
  },
)

vueuse ​

vue
<script setup>
import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'
// tracks mouse position
const { x, y } = useMouse()

// is user prefers dark theme
const isDark = usePreferredDark()

// persist state in localStorage
const store = useLocalStorage(
  'my-storage',
  {
    name: 'Apple',
    color: 'red',
  },
)
</script>

eventBus ​

  • EventBus 支持 vue2（创建一个Vue实例充当eventBus）
  • 适用：父组件想要调用很深层级子组件的api
js
import Vue from 'vue'
Vue.prototype.$EventBus = new Vue()
js
// 在子组件
this.$EventBus.$on('eventName1', (val) => {
  
})
this.$EventBus.$on('eventName2', (callback) => {
  // 调取函数,并传入
  callback(vals)
})
js
// 父组件
methods:{
  getSome1(){
    this.$EventBus.$emit('eventName1', val)
  },
  getSome2(){
    return new Promise((resolve) => {
      // 传入函数
      this.$EventBus.$emit('eventName2', (vals) => {
        // 接到返回值
        // 利用promise resolve 返回
        resolve(vals)
      })
    })
  }
}

mitt ​

  • mitt 支持 vue3 (事件总线)
  • 参考