使用 read 讀取 State | 點燈坊

Vue 3 希望我們使用 .value 讀取 State，但這種方式不方便 Point-free，Vue3-fp 提供了 Curry Function 版本的 read。

Version

Vue 3.2
Vue-fp 0.3

Composition API

讀取 state 並使用 console.log 印出。

<template>
  <div>{{ name }}</div>
</template>

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

let name = ref ('Sam')
console.log (name.value)
</script>

第 8 行

let name = ref ('Sam')

使用 ref 定義 name state。

第 9 行

console.log (name.value)

使用 console.log 印出 name state，需使用 .value 讀取 name state 內部值。

Point-free

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

<template>
  <div>{{ name }}</div>
</template>

<script setup>
import { ref, unref } from 'vue'
import { pipe, thunkify } from 'ramda'
import { log } from 'wink-fp'

let read = thunkify (unref)
let name = ref ('Sam')

pipe (
  read (name),
  log
) ()
</script>

10 行

let read = thunkify (unref)

將 unref 加以 thunkify 方便 Point-free。

14 行

pipe (
  read (name),
  log
) ()

使用 pipe 組合 IIFE：

• read (name)：讀取 name state
• log：印出結果

Vue3-fp

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

<template>
  <div>{{ name }}</div>
</template>

<script setup>
import { ref } from 'vue'
import { read } from 'vue3-fp'
import { pipe } from 'ramda'
import { log } from 'wink-fp'

let name = ref ('Sam')

pipe (
  read (name),
  log
) ()
</script>

第 7 行

import { read } from 'vue3-fp'

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

read :: Ref a -> a
由 state 讀出內部 value

Ref a：傳入 state

a：回傳內部 value

Conclusion

• 透過 .value 讀取 state 並不是適合 Point-free，因此另外建立了 read
• 很多人抱怨 Vue 2 是一堆 this，而 Vue 3 是一堆 .value，透過 Vue3-fp 的 read 就再也不用使用 .value 了

Reference

Vue, urnef