@nuxtjs/harlem
@nuxtjs/harlem
Harlemは、Vue 3用のシンプルで、特定の思想に偏らず、軽量で拡張可能な状態管理ソリューションです。
@nuxtjs/harlem
Harlemは、Vue 3用のシンプルで、特定の思想に偏らず、軽量で拡張可能な状態管理ソリューションです。あらゆる規模のプロジェクトと、あらゆる経験レベルの開発者に対応するように設計されています。
機能
- 👌 設定不要
- 🐨 シンプルで関数型の状態管理
- 🧱 簡単に拡張可能
- 💯 Nuxt 3をサポート
クイックセットアップ
@nuxtjs/harlem依存関係をプロジェクトに追加します
yarn add @nuxtjs/harlem # or npm install @nuxtjs/harlem
@nuxtjs/harlemをnuxt.config.tsのmodulesセクションに追加します- ストアの作成と使用方法については、Harlemガイドに従ってください。
注:createStoreは、使用する場所で自動的にインポートされるため、自分でインポートする必要はありません。
例
最小限の例を次に示します。追加の手順なしで、これをアプリにコピーして貼り付けることができます。
~/stores/user.ts
const STATE = {
firstName: 'John',
lastName: 'Smith',
}
export const { state, getter, mutation, ...store } = createStore('user', STATE)
export const fullName = getter('fullName', state => {
return `${state.firstName} ${state.lastName}`
})
export const setFirstName = mutation<string>('setFirstName', (state, payload) => {
state.firstName = payload
})
export const setLastName = mutation<string>('setLastName', (state, payload) => {
state.lastName = payload
})
~/app.vue
<template>
<div class="app">
<h1>Hello {{ fullName }}</h1>
<input v-model="firstName" type="text" placeholder="First name" />
<input v-model="lastName" type="text" placeholder="Last name" />
</div>
</template>
<script lang="ts" setup>
import { state, fullName, setFirstName, setLastName } from '~/store/user'
const firstName = computed({
get: () => state.firstName,
set: value => setFirstName(value),
})
const lastName = computed({
get: () => state.lastName,
set: value => setLastName(value),
})
setLastName('Doe')
</script>
詳細と例については、Harlemドキュメントとリポジトリをご覧ください。
開発
- このリポジトリをクローンします
corepack enableを使用して Corepack を有効にします（Node.js < 16.10の場合はnpm i -g corepackを使用します）pnpm installを使用して依存関係をインストールしますpnpm prepareを実行して、タイプスタブを生成します。- 開発モードでプレイグラウンドを起動するには、
pnpm devを使用します。