vue3 CompositionAPI 函数以及变量抽离成单独的文件

新建hooks.ts

import { ref, onMounted } from 'vue'

export default function useRooks() {

  const list = ref<any>([])

  const showShare = ref<boolean>(false)

  const onShow = () => {

    showShare.value = true

  }

  const onHandle = () => {

    getdata()

  }

  let time = 1

  let data = [{}]

  const getdata = () => {

    time = time + 1

    console.log(time)

    new Promise((resolve, reject) => {

      data = [...data, {}]

      list.value = data

      resolve(true)

    })

  }

  onMounted(() => {

    getdata()

  })

  return {

    getdata,

    list,

    onShow,

    showShare,

    onHandle,

  }

}

<template>

  <div>

    <button @click="onShow">分享</button>

    <button @click="onHandle">测试hooks</button>

  </div>

</template>

<script lang="ts">

import { defineComponent } from 'vue'

import useRooks from './hooks/index'

export default defineComponent({

  components: { share, Rotate },

  setup() {

    const { list, getdata, showShare, onShow, onHandle } = useRooks()

    return {

      showShare,

      onShow,

      list,

      getdata,

      onHandle,

    }

  },

})

</script>

<style lang="scss" scoped></style>