Vue3 で状態管理を実装するために provide を使用する方法

//メイン.ts
'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
'./router' からルーターをインポートします

'./store' からストアをインポートします

const app = createApp(App)

app.use(ルーター).use(ストア).mount('#app')

// スカイビューエクス/index.ts
'./main/index' から * をエクスポートします

//スカイビューエクス/メイン/インデックス.ts
'vue' から {inject, reactive, readonly} をインポートします。

const mainStoreSky = Symbol('メインストアキー')

インターフェース storeOptions {
  状態: 任意
  アクション?: 任意
  突然変異?: どれか
}

export const createStore = (options: storeOptions = {}) => { // ストアオブジェクトを作成する const initOptions = {
    州： {}、
    アクション: {},
    変異: {},
  }

  const mergeOptions: storeOptions = Object.assign(initOptions, オプション)

  const 状態 = リアクティブ(mergeOptions.state)

  定数ストア = {
    状態: 読み取り専用(状態)、
    ディスパッチ(イベント名: 文字列、...引数: 任意[]) {
      mergeOptions.actions[イベント名](ストア、...引数)
    },
    コミット(イベント名: 文字列、...引数: 任意[]) {
      ...
    },
  }

  戻る {
    インストール(アプリ: 任意) {
      app.provide(メインストアSky、ストア)
    },
  }
}

export const useStore = (): any => { // 他のコンポーネントはこのメソッドを使用してストアオブジェクトを取得します return inject(mainStoreSky)
}

エクスポートconst mapState = () => {
  定数ストア = useStore()
  ストアの状態を返す
}

エクスポート const mapActions = (イベント名: 文字列) => {
  定数ストア = useStore()
  return (...args: any[]) => store.dispatch(eventName, ...args)
}

エクスポートconst mapMutations = (eventName: string) => {
  定数ストア = useStore()
  return (...args: any[]) => store.commit(eventName, ...args)
}

// ストア/インデックス.ts
'../sky-vuex/index' から {createStore} をインポートします。

エクスポートデフォルトcreateStore({
  州： {
    年齢: 18
  },
  突然変異:
    setAge(状態: 任意、データ: 数値) {
      state.age = データ
    }
  },
})

// ホーム.vue
<テンプレート>
  <div class="home">
    <button @click="handleAge(23)">データの変更</button>
    <h1>{{ 状態.年齢 }}</h1>
  </div>
</テンプレート>

<script lang="ts">
'vue' から {defineComponent} をインポートします。
'@/sky-vuex/index' から { useStore、mapActions、mapMutations } をインポートします。

エクスポートデフォルトdefineComponent({
  名前: 'ホーム'、
  設定（） {
    定数ストア = useStore()

    定数 handleAge = mapMutations('setAge')
    // 定数 handleAge = mapActions('setAge')

    // 定数 handleAge = () => {
    // store.dispatch('setAge', 5)
    // }

    戻る {
      状態: store.state、
      ハンドル年齢、
    }
  },
})
</スクリプト>