目次
反応する
ステップ 1: インストール
npm install zustand # or yarn add zustand
ステップ 2: ストアの初期化
创建的 store 是一个 hook，你可以放任何东西到里面：基础变量，对象、函数，状态必须不可改变地更新，set 函数合并状态以实现状态更新。
// store.ts
import {
create } from 'zustand'
const useStore:any = create((set:any) => ({
count: 1,
inc: () => set((state:any) => ({
count: state.count + 1 })),
dec: () => set((state:any) => ({
count: state.count - 1 }))
}))
export {
useStore };
ステップ 3: バインディング コンポーネントを保存して完了です。
<!--app.tsx-->
<Counter></Counter>
<!--count-->
<div style={
{
display: "flex", gap: "10px" }}>
<Incer></Incer>
<Decer></Decer>
</div>
// dec.tsx
import "./dec.css";
import {
useStore } from "../../store.ts";
function Counter() {
const {
count, dec } = useStore();
return (
<>
<button onClick={
() => dec()}>decrease: count is {
count}</button>
</>
);
}
export default Counter;
// inc.tsx
import "./dec.css";
import {
useStore } from "../../store.ts";
function Counter() {
const {
count, dec } = useStore();
return (
<>
<button onClick={
() => dec()}>decrease: count is {
count}</button>
</>
);
}
export default Counter;
レンダリング
ヴュー
ステップ 1: インストール
npm install zustand-vue # or yarn add zustand-vue
ステップ 2: ストアの初期化
//store.ts
import create from "zustand-vue";
const useStore:any = create((set:any) => ({
count: 1,
inc: () => set((state:any) => ({
count: state.count + 1 })),
dec: () => set((state:any) => ({
count: state.count - 1 }))
}))
export {
useStore };
ステップ 3: バインディング コンポーネントを保存すれば完了です。
<!--app.vue-->
<Counter />
<!--counter.vue-->
<div style="display: flex;gap: 10px;">
<Incer></Incer>
<Decer></Decer>
</div>
<!--Dec.vue-->
<script setup lang="ts">
import {
useStore } from '../store';
const count = useStore((state: any) => state.count);
const dec = useStore((state: any) => state.dec);
</script>
<template>
<button @click="dec()">decrease: count is {
{ count }}</button>
</template>
<!--Inc.vue-->
<script setup lang="ts">
import {
useStore } from '../store';
const count = useStore((state:any) => state.count)
const inc = useStore((state:any) => state.inc);
</script>
<template>
<button @click="inc()">increase: count is {
{ count }}</button>
</template>
レンダリング
マイクロフロントエンド
zustand也可用于微前端：zustand-pub
zustand-pub は、Iframe、マイクロフロントエンド、モジュールフェデレーション、モジュール化、コンポーネント化などのビジネスシナリオ向けに、アプリケーション間およびフレーム間での状態管理および状態共有機能を提供します。
なぜズスタンドパブが必要なのでしょうか？
1. コンポーネント間およびアプリケーション間通信のための別のソリューション: アプリケーション/コンポーネント (アプリケーション間シナリオをサポートしているとも理解できます) は、相互に状態を呼び出したり変更したり、コンポーネントのレンダリングをトリガーしたりできます
。困難を放棄できる PostMessage + addeventlistener + action は維持される
マイクロフロントエンドであれば、eventCenter + action は不要になる 状態管理のアクション動作を通じて状態を直接変更できる
2. iframe、マイクロフロントエンド、その他のシナリオを含むアプリケーション/コンポーネント間の状態をキャッシュできます。アプリケーションが埋め込まれている場合、状態を再要求/処理する必要はありません。
3. コンポーネント ライブラリでのグローバル状態管理の直接参照の実現可能性の向上: 通常、ビジネス コンポーネントでグローバル ストアを参照すると、コンポーネントを別のアプリケーションで再利用できなくなり、コンポーネントの再利用性が低下します。 zustand-Pub をベースにすると、そのような問題はなくなり、再利用性と開発効率が両立します。
4. 店舗モジュール管理の実現可能性を向上させ、コードの重複を削減: これまで、モジュール管理された店舗のステータスは、異なる倉庫 (アプリケーション) で再利用する場合に同期的に更新できませんでしたが、zustand-pub モジュールに基づいた店舗のステータスは、同期的に更新できなかった管理を同期的に更新できるようになり、ストアロジックの再利用の可能性が向上し、研究開発プロセスにおける研究開発の効率が向上します。
5. 事前リクエスト: 一部の iframe/マイクロ フロントエンド シナリオでは、インターフェイス リクエストが多すぎるため、ページのレンダリングが遅くなります。このソリューションに基づいてサブアプリケーション ステータスの事前リクエストを作成し、ユーザー エクスペリエンスを最適化できます
。経験: devtools に基づいて、同時デバッグ/トレースが可能 複数のアプリケーション間のストアにより、アプリケーション間の通信のデバッグの難しさを大幅に軽減できます。
7. 低い移行コスト: zustand または zustand-vue を使用している場合、zustand-pub の使用は簡単です。
インストール
npm install zustand-pub # or yarn add zustand-pub
ステップ 1: 状態分離コンテナー pubStore を初期化する (シナリオ A)
//index,js
import PubStore from 'zustand-pub'
const pubStore = new PubStore('key')
ステップ 2: 分離コンテナー pubStore にデータ platformStore を入力する (シナリオ A)
// vue
import create from "zustand-vue";
//react
// import create from "zustand";
interface IState {
appInfo: {
name: string
}
}
interface IAction {
setAppName: (val: string) => void
}
const platformStore = pubStore.defineStore<IState & IAction>('platformStore', (set) => ({
appInfo: {
name: '' },
setAppName(val: string) {
set({
appInfo: {
name: val
}
})
}
}))
const usePlatformStore = create(platformStore)
返回值 usePlatformStore 为 hook，场景 A 下，可通过状态 selector 获取对应状态
// vue3
<template>
<div>{
name}</div>
</template>
<script>
const name = usePlatformStore((state) => state.appInfo.name);
const setAppName = usePlatformStore((state) => state.setAppName);
export default {
name: "AppA",
data(){
return {
name
}
},
methods:{
setAppName
}
}
</script>
// react
// function AppA() {
// const name = usePlatformStore((state) => state.appInfo.name);
// const setAppName = usePlatformStore((state) => state.setAppName);
// return <div>{name}</div>
// }
ステップ 3: 分離コンテナー pubStore の下にあるデータ platformStore を取得し、コンポーネントをバインドします (シナリオ B)
// vue3
<template>
<div>{
name}</div>
</template>
<script setup lang="ts">
interface IState {
appInfo: {
name: string
}
}
interface IAction {
setAppName: (val: string) => void
}
import PubStore from "zustand-pub";
import create from "zustand-vue";
const pubStore = new PubStore('key')
const store = pubStore.getStore<IState & IAction>("platformStore");
const usePlatformStore = create(store || {
});
const name = usePlatformStore((state) => state.appInfo.name);
const setAppName = usePlatformStore((state) => state.setAppName);
</script>
// react
// import PubStore from "zustand-pub";
// import create from "zustand";
// const pubStore = new PubStore('key')
// const store = pubStore.getStore<IState & IAction>("platformStore");
// const usePlatformStore = create(store || {});
// function AppB() {
// const name = usePlatformStore((state) => state.appInfo.name);
// const setAppName = usePlatformStore((state) => state.setAppName);
// return <div>{name}</div>
// }