あなたはVUEXの代替として組成APIを使用する必要がありますか?

組成APIはVueコンポーネントとインスタンスから無効なデータを解放しました.これは明白なアプリケーション-グローバル反応状態です.これが達成されることができるならば、あなたはVuexを必要としますか?
この記事では、私はあなたが組成のAPIの機能とVUEXを置き換えることができますどのように表示されますまた、これは賢明なアイデアかどうかをケースを確認します.
注:この記事はもともと投稿されましたhere on the Vue.js Developers blog 2020年10月4日

If you want to brush up on the concepts of Vuex, first read WTF is Vuex? A Beginner's Guide To Vue's Application Data Store. And if you aren't familiar with the Vue Composition API, you can learn about that here.

構成APIによるグローバル反応状態
VEEXが存在する主な理由は、Vueアプリでグローバル反応状態を許可することです.それがなければ、コンポーネントインターフェイスすなわちプロップ/イベントを介してローカルコンポーネントの状態を共有できます.つの層の深さのコンポーネント4からの小道具とイベントを渡すことは、VUEユーザーにとってあまりにも慣れ親しんだタイプのDruggeryです.
しかし、構成API(Vue 3でパックされた)は、コンポーネント(および実際には、Vueアプリの外)の外側に独立した反応変数を作成することができます.たとえば、リアクティショナル変数をエクスポートするモジュールファイルを作成し、これを使用するコンポーネントにインポートできます.

組成物のDIY VUEX
どのように我々は組成APIを使用して独自のVuexをロールバックすることができます見てみましょう.まず、グローバル状態変数を宣言してエクスポートするファイルを作成します.
を使いましょうreactive 値を持つ状態オブジェクトを作成する方法count , 仮定我々はアプリ全体このカウント値を使用します.
src/globaljs

import { reactive } from "vue";

const state = reactive({
  count: 0
});

export default { state };

パターンパターン
VUEXドキュメントが言うように- VUEXは両方のパターンとライブラリです.状態を予測できるようにするためには、変数が直接変異されないことが重要です.
我々は簡単に十分に我々のDIY VUEXで実装することができます.私たちはreadonly 我々の状態の読み取り専用コピーを作成するメソッド.また、メソッドを提供しますincrement これはユーザがカウント値を変更するために使うものです(これはVUEXの突然変異に似ています).
src/globaljs

import { reactive, readonly } from "vue";

const state = reactive({
  count: 0
});

const increment = function () {
  state.count++;
}

export default { state: readonly(state), increment };

ストアのインストール/インストール
私たちのDIYのVUEXストアを使用する最も簡単な方法は、提供/注入機能です.そこで、このモジュールをアプリケーションのルートインスタンスにインポートしますprovide これはすべての子コンポーネントに利用可能です.
src/mainjs

import { createApp } from "vue";
import global from "@/global";

const app = createApp({
  provide: {
    global
  },
  ...
}

今、我々はそれを使用してアクセスすることができますinject :
src/コンポーネント/myComponent.Vue

<template></template>
<script>
export default {
  inject: ["global"]
}
</script>

状態値とメソッドは現在使用できます.
src/コンポーネント/myComponent.Vue

<template>
  <div>{{ global.state.count }}
  <button @click="global.increment">Increment</button>
</template>
<script>
export default {
  inject: ["global"]
}
</script>

それで、あなたはVuexをためすべきですか?
我々はどのように組成APIを使用して独自のVuexをロールバックすることができます見てきました.そうすることで、私たちはVUEXに関する苦情をたくさん克服しました.

最小自明板

“突然変異”、“コミット”などのような難解な命名なし

追加の依存関係はありません.

では、なぜVUEXの溝を完全に?

Vuex 1の利点:デバッグ
我々がグローバル反応状態メカニズムをコピーしたとしても、我々がコピーしなかったVuexの1つの巨大な利点は、それがデバッグ機能であるということです.
第一に、すべての突然変異はVUEXで追跡され、Vue devtoolsでどのコンポーネントがどのように変化したかを見ることができます.
第二に、時間旅行のデバッグです.これは、アプリケーションの任意の以前の状態を選択することができますVUEXの機能です.

Vuex 2の利点:プラグイン
Vuexのもう一つの利点はplugin ecosystem . たとえば、VUEXの永続的な状態のプラグインを使用すると、ローカルストレージ内のアプリケーションの状態を維持することができますし、Vueのルータプラグインは、現在のルートデータをストア状態で同期します.
すべての既存のプラグインは、実際には組成APIユーティリティとして複製することができますが、Vuexの標準化された構造なしで、彼らはプラグアンドプレイされません.

結論
小さなプロジェクトの構成APIを使用してグローバルな反応状態のための単純なモジュールを作成することに害がありません、あるいは、どんなオーバーヘッドも避けるのが本当に重要であるならば.
しかし、Vuexのデバッグ機能は、それが大規模なVueアプリ開発のための重要なツールになります.
楽しみ.

更なる読書

Do React Hooks Replace Redux?

この記事をお楽しみください.
Vueと毎週受信トレイでこのような記事を取得します.JS開発者ニュースレター.
Click here to join!