VanJSでのグローバル状態管理（store管理）の導入が楽だった

ReactやVueのグローバル状態管理（store管理）がVanJSでも可能だったので紹介します。ReactだとReduxやRecoil、VueだとVuexやPiniaなどのライブラリを入れて状態管理をする方法がありますが、VanJSでは必要ありません。VanJSを使用するためのvanjs-coreだけで状態管理ができます。

デモコードを書いたので、実際に状態管理ができるか試してみてください。

デモ

コード

.
└── src
  ├── components
  │   ├── TextInput1.ts
  │   ├── TextInput2.ts
  │   └── TextInput3.ts
  ├── main.ts
  └── store.ts

src/store.tsのファイルが状態管理のファイルです。textStateをstoreの変数としています。

src/store.ts

import van from 'vanjs-core'

// storeの変数
export const textState = van.state('')

// storeのtextStateの値を取得する場合はこの変数を使用
export const text = van.derive(() => textState.val.toUpperCase())

// storeのtextStateを更新する場合はこの関数を使用
export const updateText = (value: string) => (textState.val = value)

import { text } from './store'で、storeから値を取得しています。storeのtextの値が変更されたら、このtextの値も変わります。

src/main.ts

import van from 'vanjs-core'

import { TextInput1 } from './components/TextInput1'
import { TextInput2 } from './components/TextInput2'
import { TextInput3 } from './components/TextInput3'

// storeから値を取得
import { text } from './store'

const App = () => {
  const { div, p } = van.tags

  return div(
    p('Text is ', text),
    TextInput1,
    TextInput2,
    TextInput3,
  )
}

van.add(document.getElementById('app')!, App())

inputフォームの入力で、updateText関数を使ってstoreのtextStateの値を更新してます。

src/components/TextInput1.ts

import van from 'vanjs-core'

// storeから値と更新する関数を取得
import { text, updateText } from '../store'

export const TextInput1 = () => {
  const { div, p, input } = van.tags

  return div(
    { style: 'padding: 1em; background: #cff;' },
    p('TextInput1 Component'),
    input({ value: text, oninput: (e) => updateText(e.target.value) }),
  )
}

src/components/TextInput2.ts

import van from 'vanjs-core'

// storeから値と更新する関数を取得
import { text, updateText } from '../store'

export const TextInput2 = () => {
  const { div, p, input } = van.tags

  return div(
    { style: 'padding: 1em; background: #fcf;' },
    p('TextInput2 Component'),
    input({ value: text, oninput: (e) => updateText(e.target.value) }),
  )
}

src/components/TextInput3.ts

import van from 'vanjs-core'

// storeから値と更新する関数を取得
import { text, updateText } from '../store'

export const TextInput3 = () => {
  const { div, p, input } = van.tags

  return div(
    { style: 'padding: 1em; background: #ffc;' },
    p('TextInput3 Component'),
    input({ value: text, oninput: (e) => updateText(e.target.value) }),
  )
}

感想

通常のコンポーネントの状態管理と書き方が同じため、とても楽だなと思いました。VanJSができれば学習コストもほぼ必要ない点も良いと思いました。

まとめ

VanJSでの状態管理を紹介しました。VanJSでの状態管理はライブラリを入れる必要がないため、既存のプロジェクトで状態管理したくなった場合でも、依存関係など気にせず導入することができます。VanJSでコンポーネント間でのバケツリレーが辛くなった場合に、導入してはいかがでしょうか。

最後に

GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。