vue 许多页面，我很多代码是可以复用的，怎么打包成模块

Question

比如下面这段代码，多个页面都有这段代码，由于参数过多，还有很多 双向绑定的元素

function handleDelete (index, row) { // 删除, patch方法修改is_active
  const params = { id: row.id, is_active: false }
  patchMethod(data.url + row.id, params)
  data.searchResult = data.searchResult.filter(x => x.id !== row.id) // 更新表格
  childrenData.value.addRecycleDataLength()
  // 改变行数和页数
  page.totalCount = page.totalCount - 1 // 总行数
  page.pageCount = Math.ceil(data.searchResult.length / page.pageSize) // 总页数为当前页
}

function handleClear (index, row) { // 清空回收站,delete方法
  const params = { id: row.id }
  deleteMethod(data.url + row.id, params)
  data.searchResult = data.searchResult.filter(x => x.id !== row.id)
  childrenData.value.subRecycleDataLength()
  // 改变行数和页数
  page.totalCount = page.totalCount - 1
  page.pageCount = Math.ceil(data.searchResult.length / page.pageSize)
}

我现在把上面的代码单独写在 一个 buttom.js文件中
然后要用

import './ buttom.js'

这样用不了，要怎么实现这些代码的 复用

Answer 1

有两种方式：

1. buttom.js里每个方法单独export

    例如export function handleDelete() {  }
           export function handleClear() {  } 
   
   xxx.vue
   导入：    import {handleDelete ,handleClear  }  from 'buttom.js'
   

2. buttom统一暴露

    const  commonUtils = {
         handleDelete(key) {  },
         handleClear(key) {  ]
    }
    export default commonUtils 
    
   xxx.vue
   

   导入： import commonUtils from 'buttom.js'
   使用： commonUtils.handleDelete(key)

注意！！！，第一种之所以导入时用{}包裹，并不是es6的解构，而是es6按需导入的语法，虽然看着一样，但是是有区别的，例如你如果用默认统一导出（就是第二种的导出方式，但是却用第一种的导入方式是不行的）
还有就是第一种方法还能加以改进，每个方法单独导出的同时，最后还能用一个总方法统一导出一下，这样在调用时也就可以使用第二种 xxx.xxx的格式了
let allFuc() = {
handleClear:function(key) {
return handleClear(key)
}
}
export { allFuc }