@stencil/store
Storeは、ステンシルコアチームによる軽量の共有状態ライブラリです。 必要に応じてコンポーネントを効率的に再レンダリングする単純なキー/値マップを実装します。
- 軽量
- 依存関係なし
- リアクティブマップのようなシンプルなAPI
- 最高のパフォーマンス
npm install @stencil/store --save-dev
store.ts:
import { createStore } from "@stencil/store";
const { state, onChange } = createStore({
clicks: 0,
seconds: 0,
squaredClicks: 0
});
onChange('clicks', value => {
state.squaredClicks = value ** 2;
});
export default state;component.tsx:
import { Component, h } from '@stencil/core';
import state from '../store';
@Component({
tag: 'app-profile',
})
export class AppProfile {
componentWillLoad() {
setInterval(() => state.seconds++, 1000);
}
render() {
return (
<div>
<p>
<MyGlobalCounter />
<p>
Seconds: {state.seconds}
<br />
Squared Clicks: {state.squaredClicks}
</p>
</p>
</div>
);
}
}
const MyGlobalCounter = () => {
return (
<button onClick={() => state.clicks++}>
{state.clicks}
</button>
);
};
createStore<T>(initialState)
指定された初期状態で新しいストアを作成します。 この型は initialStateから推測されるか、ジェネリック型Tとして渡すことができます。
次のプロパティを持つ storeオブジェクトを返します。
store.state
状態オブジェクトはプロキシされます。 e。 プロパティを直接取得および設定でき、状態オブジェクトが変更されると、Storeがコンポーネントの再レンダリングを自動的に処理します。
注: ProxyオブジェクトはIE11ではサポートされていません（ポリフィルを使用している場合でも）。したがって、IE11をサポートする場合は、APIのstore.getメソッドと store.setメソッドを使用する必要があります。
store.on(event, listener)
特定のアクションのリスナーをストアに追加します。
store.onChange(propName, listener)
特定のプロパティが変更されたときに呼び出されるリスナーを追加します。
store.get(propName)
ストアからプロパティの値を取得します。
store.set(propName, value)
ストアにプロパティの値を設定します。
store.reset()
ストアを初期状態にリセットします。
store.use(...subscriptions)
ストアで指定されたサブスクリプションを使用します。 サブスクリプションは、1つ以上のプロパティ
get、set、または resetを定義するオブジェクトです。
他のグローバル状態ライブラリと同様に、各仕様テストの間に状態をリセットする必要があります。 beforeEachフックでdispose()APIを使用します。
import store from '../store';
beforeEach(() => {
store.dispose();
});Contributors
Thanks for your interest!
We just need some basic information so we can send the guide your way.