使用 write 寫入 State | 點燈坊

Vue 3 希望我們使用 .value 寫入 State 內部值，但這種方式不方便 Point-free，Vue3-fp 提供了 Curry Function 版本的 write。

Version

Vue 3.2
Vue3-fp 0.3

Composition API

將 Sam 寫入 state 並顯示。

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

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

let name = ref ('')

name.value = 'Sam'
</script>

第 8 行

let name = ref ('')

使用 ref 建立 name state，且其初始值為 Empty String。

10 行

name.value = 'Sam'

以 .value 將 Sam 寫入 name state。

Point-free

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

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

<script setup>
import { ref } from 'vue'
import { pipe, always as K} from 'ramda'

let name = ref ('')
let write = ref => a => ref ['value'] = a

pipe (
  K ('Sam'),
  write (name)
) ()
</script>

10 行

let write = ref => a => ref ['value'] = a

.value 並不適合 Point-free，故另外建立 curry function 的 write，並將寫入 data 放在最後一個 argument 方便 Point-free。

12 行

pipe (
  K ('Sam'),
  write (name)
) ()

使用 pipe 組合 IIFE：

• K ('Sam')：準備寫入值
• write (name)：寫入 name state

可發現使用 write 後，擾人的 .value 都不見了。

Vue3-fp

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

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

<script setup>
import { ref } from 'vue'
import { write } from 'vue3-fp'
import { pipe, always as K} from 'ramda'

let name = ref ('')

pipe (
  K ('Sam'),
  write (name)
) ()
</script>

第 7 行

import { write } from 'vue3-fp'

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

write :: Ref a -> a -> a
將 value 寫入 state

Ref a：欲寫入的 state

a：欲寫入的 value

a：回傳 state，可繼續 Function Pipeline

Conclusion

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