StimulusのDataMaps

現在、フィヨルドブートキャンブ内にて、＠Sakiさん主催の「パーフェクト Ruby on Rails輪読会」が行われています。 こちらの本、大変参考になりますが、なんだか難しいし、もう少し深掘りがしたい！と思いまして、このブログに予習・復習した内容を簡単に載せていきたいなと考えています。

4-4-4

DataMapsはStimulusで状態管理をしたい時に使う(DOMで状態を持つ)

HTMLからJSへ、JSからHTMLへデータを渡すときに便利

data-コントローラ名-データ名でデータを定義

<div data-controller='hello' data-hello-index='0'></div>

定義したデータはthis.data.get(データ名)で取得可

import { Controller } from 'stimulus'

export default class extends Controller {
  connect() {
    fetch(this.data.get('index'))
  }
}

これでindexの情報を取得でき、変更を加えたりすることができる

このget以外にもhas、set、deleteなどのメソッドがある