使用 init 建立 onMounted Hook | 點燈坊

Vue 3 希望我們使用 onMounted 建立 onMounted hook，但這種方式不方便 Point-free，Vue3-fp 提供了 Curry Function 版本的 init。

Version

Vue 3.2
Vue3-fp 0.3.2

Composition API

在 onMounted hook 讀取 price state 並增加 20。

<template>
  {{ price }}
</template>

<script setup>
import { onMounted } from 'vue'

let price = $ref (100)

onMounted (_ => price = price + 20)
</script>

第 2 行

{{ price }}

顯示 price state。

第 6 行

import { onMounted } from 'vue'

引用 onMounted。

10 行

onMounted (_ => price = price + 20)

• 將 arrow function 傳入 onMounted

Point-free

結果不變，但使用 Point-free 改寫。

<template>
  {{ price }}
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { pipe, add } from 'ramda'
import { read, write } from 'vue3-fp'

let price = ref (100)

let init = (...f) => _ => onMounted (pipe (...f))

init (
  read (price),
  add (20),
  write (price),
) ()
</script>

14 行

init (
  read (price),
  add (20),
  write (price),
) ()

使用 init 建立 onMounted hook 並立即執行：

• read (price)：讀取 price state
• add (20)：加上 20
• write (price)：寫入 price state

12 行

let init = (...f) => _ => onMounted (pipe (...f))

init 本質還是使用 onMounted，只是 onMounted() 要求傳入 function，先使用 pipe 組合 function 再傳入 onMounted。

Vue3-fp

結果不變，但使用 Vue3-fp 改寫。

<template>
  {{ price }}
</template>

<script setup>
import { ref } from 'vue'
import { add } from 'ramda'
import { read, write, init } from 'vue3-fp'

let price = ref (100)

init (
  read (price),
  add (20),
  write (price),
) ()
</script>

第 8 行

import { read, write, init } from 'vue3-fp'

Vue3-fp 已經內建 init 可直接使用。

init :: (...Function) -> onMounted
組合 function 建立 onMounted hook

• (...Function)：可傳入任意個數 function
• onMounted：回傳 onMounted hook

Conclusion

• onMounted 不方便 Point-free，使用 init 才適合 Point-free