使用 Vite 安裝 Ramda | 點燈坊

Ramda 為 FP Library，可在 Vue 中輕易使用 Ramda。

Version

Vue 3.0.11
Ramda 0.27.1

Vue Project

$ yarn create @vitejs/app vue3-ramda --template vue

使用 Vite 直接建立 Vue。

Add Ramda

$ yarn add ramda

使用 Yarn 安裝 Ramda。

Vue

<template lang='pug'>
div {{ totalPrice }}
</template>

<script setup>
import { ref } from 'vue'
import { write } from 'vue3-fp'
import { pipe, filter, where, lt, pluck, sum } from 'ramda'

let books = [
  { title: 'FP in JavaScript', price: 100 },
  { title: 'RxJS in Action', price: 200 },
  { title: 'speaking JavaScript', price: 300 }
]

let totalPrice = ref ('')

pipe (
  filter (where ({ price: lt(100) })),
  pluck ('price'),
  sum,
  write (totalPrice)
) (books)
</script>

一個最簡單的 Ramda。

第 8 行

import { pipe, filter, where, lt, map, prop, sum } from 'ramda'

Import 有用到的 Ramda function。

18 行

pipe (
  filter (where ({ price: lt(100) })),
  pluck ('price'),
  sum,
  write (totalPrice)
) (books)

使用 pipe() 組合 IIFE：

• filter (where ({ price: lt(100) }))：過濾所有 price 大於 100
• pluck ('price')：取得 price property
• sum：將所有數值加總求和
• write (totalPrice)：寫入 totalPrice state

第 2 行

div {{ totalPrice }}

顯示 totalPrice。

若能顯示 500，表示 Ramda 已經成功執行在 Vue。

Conclusion

• 在 Vue 使用 Ramda 很簡單，只要使用 yarn 安裝 Ramda，然後 import 想用的 function 即可
• Vue 3 因為不使用 this，因此特別適合 Ramda