{%hackmd BJrTq20hE %}
###### tags: `Vue` `composition API`
# 從composition API 開始VUE的生活- Composition API 共用邏輯 / Composables

簡單的來說就是把通用的功能另外寫成一個JS檔，有需要時在import。

## 如何撰寫Composables

1.在src下建立一個叫Composables的資料夾
2.在Composables內建立通用的方法
:::info
Composables內的檔案命名方式，官方建議使用use開頭命名。
:::

### Composables方法起手式
1.因為是.js檔所以自然就沒有script標籤內的setup語法糖所以，需要return 變數與含式。

2.已抓取滑鼠座標的方法(useMousePosition)為例，起手式如下

import { onMounted, onUnmounted, ref } from 'vue'
// 建立一個與檔名相同的export function
export function useMousePosition(){
  const pageX = ref(0)
  const pageY = ref(0)
  
  function mousePosition (e){
    pageX.value = e.pageX
    pageY.value = e.pageY
  }

  onMounted(()=>{
    window.addEventListener('mousemove',mousePosition)
  })
    // 記得要在onUnmounted removeEventListener
  onUnmounted(()=>{
    window.removeEventListener('mousemove',mousePosition)
  })
  // 沒有setup語法糖所以需要return  
  return{
    pageX,
    pageY,
    mousePosition,
  }
}

### 使用Composables方法

1.在想要使用使用Composables方法的component或是page中importComposables方法
2.範例如下

<script setup>
// 已解構物件展開
import { useMousePosition } from '../composable/useMousePosition.js'
// 已解構物件展開方法內return內的變數/方法
const { pageX, pageY } = useMousePosition()

</script>

<template>
    <h2> mouseX:{{pageX}} <br> mouseY{{pageY}}</h2>  
</template>

結果如下

### 如何避免Composables方法內的變數被修改?
這裡的避免修改指的是直接使用var.value = '修改的資料'，但可以使用Composables方法內的含式修改變數。

以下以useSetName為例子
1.建立Composables方法
2.指定變數readonly
3.在return name中加入:readonly(name)

import { ref,readonly } from 'vue'

export function useSetName(){
  const name = ref('Jay')
  function setName(data){
    name.value = data
  }
// 指定name為readonly的寫法
  return{
    name:readonly(name),
    setName
  }
}

2.import useSetName

import { useSetName } from '../composable/useSetName.js'
const { name, setName} = useSetName()
// name.value = 'Jason'

<h2>{{name}}</h2>
<button type="button" @click="setName('May')">setName</button>

3.結果如下圖
原本為
點擊setName後
如果在上一步 name.value = 'Jason'的話則會出現報錯。

### 建立一個取得資料的Composable使用axios

1.建立Composable(useGetUserData)

import axios from 'axios'
import { ref } from 'vue'
export function useGetUserData(){
    // 取得資料所存的變數
  const userData = ref([])
   // 儲存錯誤訊息的變數
  const errorMessage = ref("")
  async await函式
  async function initGetData(url){
    try {
      const res = await axios.get(url)
      userData.value = res.data
    } catch (error) {
      console.log(error)
      errorMessage.value = "API出錯啦!!"
    }
  }
  return{
    userData,
    errorMessage,
    initGetData,
  }
}

2.import useGetUserData

import { useGetUserData } from '../composable/useGetUserData.js'
import { onMounted } from '@vue/runtime-core'
const url = 'https://randomuser.me/api/'
const { userData, errorMessage, initGetData} = useGetUserData()
name.value = 'Jason'
onMounted(()=>{
  initGetData(url)
})

加上v-if與v-else指令可以做出簡單的loading，或是API錯誤訊息

<h2 v-if="userData.length === 0"> Loading....</h2>
<h2 v-if="errorMessage !==''">{{errorMessage}}</h2>
<p v-else>{{userData}}</p>

結果如下圖
還沒收到資料時
收到資料
API出錯

其他的Composable方法範例
useCount

import { ref } from 'vue'

export function useCount(){
  const count = ref(0)
  function add(){
    count.value++
  }
  function minus(){
    count.value--
  }
  return{
    count,
    add,
    minus
  }
}

使用useCount

import { useCount } from '../composable/useCount.js'
const { count, add, minus} = useCount()

<h2> mouseX:{{pageX}} <br> mouseY{{pageY}}</h2>
<h2>count{{count}}</h2>
<button type="button" @click="add">add</button>
<button type="button" @click="minus">minus</button>

結果如下圖
點擊add一下則數字+1

點擊minus一下則數字-1

參考資料
---
-[Vue3 + Vite 快速上手 Get Startrd EP5 - Composition API 共用邏輯 / Composables](https://www.youtube.com/watch?v=JrIF9LidZGo&list=UU7ArpUezGLX-dZ0FTS_jVMQ&index=6)