使用 not() 實現 toggle | 點燈坊

Toggle 為實務上常見的需求，Imperative 會使用 ! Operator，在 FP 可使用 not()。

Version

Vue 3.0.5
Ramda 0.27.1

Imperative

按下 toggle 會使 state 從 true 與 false 切換。

<template>
  <button @click="onClick">toggle</button>
  {{ isShow }}
</template>

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

let isShow = ref(true)

let onClick = () => isShow.value = !isShow.value
</script>

11 行

let onClick = () => isShow.value = !isShow.value

Imperative 會使用 ! 切換。

not()

<template>
  <button @click="onClick">toggle</button>
  {{ isShow }}
</template>

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

let isShow = ref(true)

let onClick = pipe(
  read(isShow),
  not,
  write(isShow)
)
</script>

13 行

let onClick = pipe(
  read(isShow),
  not,
  write(isShow)
)

! 在 FP 可使用 not() 取代。

Conclusion

• FP 會盡量不用 operator 而改用 function 取代，其中 not() 正是對應 ! operator

Reference

Ramda, not()