Vue 3.0では、Vuexが不要になる場合があります

注意：記事の最後に4冊の本があります〜

Vuex素晴らしい状態管理ライブラリです。それは非常にシンプルで、Vue統合は非常に優れています。なぜ誰もが諦めるのでしょうVuexか？Vue3バージョンの次のリリースが基礎となる応答システムを公開し、アプリケーションを構築するための新しい方法を導入するためかもしれません。新しい応答システムは非常に強力であり、集中型の状態管理に直接使用できます。

ステータスの共有が必要ですか？

場合によっては、複数のコンポーネント間のデータフローが非常に困難になるため、集中的な状態管理が必要になります。これらの状況は次のとおりです。

複数のコンポーネントが同じデータを使用する
コンポーネントの深い入れ子

上記のいずれも当てはまらない場合、答えは簡単で、状態を共有する必要はありません。

しかし、上記の状況の1つがある場合はどうなりますか？最も簡単な答えはを使用することVuexです。これは実証済みのソリューションであり、うまく機能します。

しかし、他の依存関係を追加したくない場合や、設定が複雑すぎる場合はどうでしょうか。新しいVue3バージョンでは、Composition API組み込みの方法でこれらの問題を解決できます。

新しいソリューション

共有状態は、次の2つの条件を満たす必要があります。

対応：状態が変化した場合、それらを使用するコンポーネントも更新する必要があります
可用性：どのコンポーネントでもステータスにアクセスできます

レスポンシブ

Vue3それは多くの機能を通してその応答システムを開示しました。reactive関数を使用してレスポンシブ変数を作成できます（代わりに関数を使用しrefます）。

import { reactive } from 'vue';

export const state = reactive({ counter: 0 });

reactive関数Proxyオブジェクトの戻りから、オブジェクトのプロパティの変更を追跡できます。コンポーネントテンプレートで使用すると、応答値が変更されると、コンポーネントは再レンダリングされます。

<template>
  <div>{
    
    { state.counter }}</div>
  <button type="button" @click="state.counter++">Increment</button>
</template>

<script>
  import { reactive } from 'vue';

  export default {
    setup() {
      const state = reactive({ counter: 0 });
      return { state };
    }
  };
</script>

可用性

上記の例は単一のコンポーネントに非常に役立ちますが、他のコンポーネントは状態にアクセスできません。この問題を克服するには、を使用provideして、アプリケーションが参照にアクセスするinject方法をVue 3参照できます。

import { reactive, provide, inject } from 'vue';

export const stateSymbol = Symbol('state');
export const createState = () => reactive({ counter: 0 });

export const useState = () => inject(stateSymbol);
export const provideState = () => provide(
  stateSymbol, 
  createState()
);

あなたは、ときにSymbol、キーとに値を渡すprovideとき、任意のサブコンポーネントのメソッドはこの値を使用することができます。Symbol値を提供および取得するときkeyは、同じ名前を使用します。

このようにして、最上位のコンポーネントに値を指定した場合、その値はすべてのコンポーネントで使用できます。また、メインアプリケーションインスタンスで呼び出すこともできますprovide。

import { createApp, reactive } from 'vue';
import App from './App.vue';
import { stateSymbol, createState } from './store';

const app = createApp(App);
app.provide(stateSymbol, createState());
app.mount('#app');

<script>
  import { useState } from './state';

  export default {
    setup() {
      return { state: useState() };
    }
  };
</script>

コードをより堅牢にする

上記の解決策は機能しますが、欠点があります。誰が何を変更したのかわかりません。ステータスは制限なしで直接変更できます。

readonly関数を使用して状態をラップし、状態を保護できます。これは、Proxyオブジェクトに渡される変数をカバーし、変更を防止するためのプロキシオブジェクトです（変更を試みるときに警告します）。これらの変更は、書き込み可能なストレージにアクセスできる別の関数で処理できます。

import { reactive, readonly } from 'vue';

export const createStore = () => {
  const state = reactive({ counter: 0 });
  const increment = () => state.counter++;

  return { increment, state: readonly(state) };
}

外部は読み取り専用状態にのみアクセスでき、エクスポートされた関数のみが書き込み可能状態を変更できます。

不要な変更から状態を保護することにより、新しいソリューションは比較的近くなりVuexます。

総括する

Vue 3応答性の高いシステムと依存性注入メカニズムを使用することにより、ローカル状態から変換され、より小さなアプリケーションでVuex一元化された状態管理に置き換えられました。

これで、読み取り専用でテンプレートの変更に応答できる状態オブジェクトができました。状態のような、唯一の特定の方法によって改変することができます。関数を使用して、他のを定義できます。Vuexactions/mutationscomputedgetter

Vuex モジュール処理など、より多くの機能がありますが、必要としない場合もあります。

詳細：https://dev.to/blacksonic/you-might-not-need-vuex-with-vue-3-52e4

本を送る

特にお勧めの「Vue.jsアプリケーションテスト」！

「Vue.jsアプリケーションテスト」は、Vue.jsの創設者であるEvan Youから強く推奨されており、公式のVueテストツールの作成者によって書かれています。さまざまな能力レベルに適した、Vueアプリケーションの自動テストの作成に関する本です。 Vueアプリケーション開発者。

この本では、Hacker Newsアプリケーションを最初から作成することにより、各開発段階でのVue.jsアプリケーションに適用可能なテストスキルについて詳しく説明し、Vue.jsアプリケーションテストスイートのコンパイルに必要なスキルを完全に示します。

転送転送の作成者を見る❤️